Sunday, May 26, 2013

How To Create A Basic Search Form

So this is the continuum of the earlier post about using Google Custom Search - Results Only template.

I'm gonna show the basic structure of the search bar. It consists of:
  • The search form action - <form> tag.
  • The text (query) input - <input> tag, can be text type or search type.
  • The button (submit) input (optional) - <input> tag, using submit type.
  • The styling of the text input and the button.
This is a working demo. You can search Monkey Raptor using this search bar. If you use this, you'll be redirected to the search results page. Remember to comeback to this post afterward.
The searching method is conveniently powered by the Google Custom Search Engine (GCSE) - particularly using the Results Only template for the search results.

The HTML of the search bar above looks like this :


The form action URL will be different on your website/blog.
It depends on where you put the HTML part of the GCSE.
On previous example, I put the JavaScript above the </body> section. You should do that. Should, but you're not obligated to.
You can also put the entire code from GCSE - JavaScript and HTML - on the page where you want the results to appear (you don't have to paste again above </body> the section).

GCSE will need the name="q" attribute for the query search input.

The size="25" states the number of characters (strings) visible on the search bar (text input).

The basic styling of that (CSS)
The selectors classes' names are different than the previous example, because, well, this is a different example.
I'm using inherit for the font family and size so it will blend in with the blog theme.

To make the size of the text input wider or narrower, you can adjust the padding property of the .text-bar class selector.
Then, adjust the padding of the .search-button selector, so they will look synchronized.

To set the button background and text color you need to change the background and color properties in the .search-button selector.

2 comments:

  1. Nandur93February 26, 2019 at 6:18 AM

    Thank you, but how to setup the loading page before result like yours,? and my result always include all of my blog label, so the result become huge.

    ReplyDelete
    Replies
    1. MonkeyRaptorMarch 1, 2019 at 5:34 AM

      Hi. Thanks for your interest. This post is quite old. I do not use GCSE on this blog anymore. Instead I use Blogger V3 search, explained on https://developers.google.com/blogger/docs/3.0/reference/posts/search

      About the loader, place an image, like an animated GIF on the top of your search result. I use base64 version of it because it is very tiny, under 2 KB. Then, when the search has loaded, replace the image with whatever you want on that search result. It is too specific if I explain it step by step, but that's the main idea. I hope it helps.

      Delete

Tell me what you think...