Dave, I keep visiting sites and seeing these cool search boxes that let you either search their entire site or search the entire Google database, all without leaving that page! I want to have something like this and would appreciate your helping me figure out the code needed.
This is a question that’s going to result in some HTML listings. You know that, so there’s no reason to panic!
First off, the good news. Google itself actually has a nice page offering you HTML code you can just cut and paste onto your own Web pages to produce the search box you seek, and some variants beside. Just check out Google Free.
Instead of relying on the bright sparks at Google, though, let’s go through the steps of building our own search box instead, so you’ll be able to see how it works.
Also, not to pick on Google because I think the world of those folk, but their HTML samples could be cleaned up a bit, usually, so I’ve also recast it as proper XHTML rather than somewhat sloppy HTML. Just don’t tell Larry and Sergey, okay?
The basic technique involved here is to be able to manipulate one of the variables handed to the Google search engine, a variable called sitesearch. Set it to a null value and you’re searching the entire World Wide Web, but set it to a specific domain and it’s constrained exactly as if you had typed in the Google special notation site:domain.
In addition to that, you need an input field and a submit button. Put them all together and here’s the minimalist Google search form that lets the user alternate between just your site (well, in this case just my site) or the entire Web:
<form method="get" action="http://www.google.com/search"> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /> <input type="radio" name="sitesearch" value="" /> The Web <input type="radio" name="sitesearch" value="askdavetaylor.com" checked /> Ask Dave Taylor<br /> </form>
There are some additional tweaks we can apply to make it a bit more fancy, including changing the radio buttons to a single check box, and aligning things a bit more nicely using a table and some simple CSS:
<form method="get" action="http://www.google.com/search"> <div style="border:1px solid black;padding:4px;width:20em;"> <table border="0" cellpadding="0"> <tr><td> <input type="text" name="q" size="25" maxlength="255" value="" /> <input type="submit" value="Google Search" /></td></tr> <tr><td align="center" style="font-size:75%"> <input type="checkbox" name="sitesearch" value="askdavetaylor.com" checked /> only search Ask Dave Taylor<br /> </td></tr></table> </div> </form>
Here’s how that renders when included on an HTML page:
If you’d like to use this on your own site, simply change the occurrences of askdavetaylor.com as appropriate.
Not too hard at all!
its nice but i want to add a search box in my site it and i want it to search only within my site. i don’t want it to search anything rather the info in my site. pls help me.
Like this you can also create a twitter search box within ur site! This is codded by myself. Its so easy if you know it!
<form method=”get” action=”http://twitter.com/search” target=”_blank”><input type=”text” name=”q” alt=”Search” value=”” maxlength=”256″ size=”32″ /><input type=”submit” value=”Search” /></form>
Image inclusion is a function of the results Google finds. If it’s a search of just your own site, I don’t think it’ll include images by default. And in terms of having it automatically just choose your own site, that’s doable by turning the “type=checkbox” into “type=hidden” (which then lets you clean up the code a bit too:
<input type=”hidden” name=”sitesearch” value=”askdavetaylor.com” />
See what I mean? Easily done once you know how to tweak the HTML.
also, is there a way to make it so that you DO NOT have to check the site seach box… in other words, so that it automatically searches your site and NOT google? thank you, you are awesome
is there a way to make the following code also show pictures on the search?
Dave,
Do I have to put the “value =”ask….” line?
this html tag is quite good but i want a deferent one…this serch tag for google but i want a search tag that only shows the result of my personal site…please tell me
Thanks Dave!
Hello Dave!
The tutorial is really nice and helpful, but it can be improved. I would like to know how can I integrate the search results page into my website.
Ca you tell me?
Thank you!
You are the best Dave!
thanks alot, at least now i can add a search box to my site.
Hi, I’m concerned about a search box created by my website designer. He says is a google search bar. It works, shows results from google and our website, but when you click on any of our website links, it does not work, it takes you to an ERROR PAGE NOT FOUND.
Please let me know what should we do or if it takes time for it to work (website went live 3 days ago).
Thank you in advance for your help. I really appreciate it.
When I add the coding it 1) creates a sort of “page break” between it and the rest of the site. And 2) trying to search only sends you to the home page, regardless of searching my site or the world wide web.
Thanks so much Dave, you just made my day!
this is confusing
Hi, I created a search box like yours, but I was wondering if there is any way I can make the search results to appears in my sime site instead of going to google?
You can also just add a search for Google+ only on your site:
http://www.scriptalicious.com/blog/2011/08/add-google-plus-search-to-your-website/
ur code is realy nice
thanks a lot…
thnx for this box . it simple and nice, i will add to my blog.
Nice sample code for Adsense search box.
hi dave
what do i need to do if i want the results to appear on my site
Many Thanks
Dave
i like this box for search… simple and powerfull… thank
THIS IS A BEST WAY…
THANKSSSSS FOR HELP ME
Hi Dave, i have a question to ask… its related to google search but not serach box.
I have developed a site for someone (an artist from CA). when she searches her site on google, on page 2 or 3 few search result comes up showing only the menu flash or the main flash (.swf) file but not any page. I found similer thing happens with other site also (i tried with yahoo, barbarabarry etc). my question is: is this normal? is there any security issue involved in such case? if so what i need to do to prevent this?
I’m a designer turned developer and novish, not have much idea on SEO. Any idea/suggestion will be highly appeciated. Thanks a lot in adv.
This is a great article ! Thank you 🙂
I had always preferred a native search box for my site to installing Google Search box. And the reason basically is that readers (especially the techies) tend to see Google search box as been a monetization scheme, so seldom uses it.
good for learning
Hi Dave, great bit of code that works a treat.
I’ve used the top code to add a search box to a new site I’m currently building but just wondered if it was possible to tweak the code to remove the radio buttons completely and for the search box to only show the text box and search button but nothing more and show results from my site only. Any help would be greatfully appreciated.
Thanks once again for the code and for making my life much simpler.
i prepared code in html.i get the webpage how can use those web pages for creating website.please send me further process creating website.
Absolutely clean and beautiful.
Thank you so much!!! Don’t tell Google but yours is far superior.
Stanley and others who are finding that you see the *source code* to the search box, rather than the box itself in your web page editor, you need to enter the code when you’re looking at the *code* to your existing page. Most of these web page editors have a “raw html” mode: that’s what you need to use. Then it should work just fine. Good luck!
Hi, I am trying to integrate it into the search field of the following template but without any success! Here is the template: http://www.templatescreme.com/demo/fashion-magazine/104
The search field must not change! I like it the way it is!
Also I like it to direct the visitor to a search page that looks similar in look and feel to my page
Will appreciate your help. Thanks & Love
Very help full. exactly what i was in search. thanks you
Hi Dave,
I want to add the search capability to my website, but when I copy your code and put it on my front page and do a preview, all I see is the code and not the search box like you show. Any help will be appreciated.
Thanks,
Stan
HI, Dave I have cpy/pstd your code in my site, its working fine, but can I show the results in my own page like mydomain.com/results.html.
Previously I was using a google code that had this option to show search results in desired page..
any suggestion appreciated
Regards
Thanks a lot for this useful information. You deserve a thumbs-up.
dude,you realy are good!thank you ,
Thanks man! This is helpful.
Hello Sir,
i have to appear the results of the search in my own website on a specific div then, how to do it?
Hello Dave,
I have placed google search in my website, but its showing only index page when i type some keywords, Can you help me how to list more than 3 pages while search button is clicked, Please check this website (zeusmedcare.com)
Dave, I really like your site. I have found that the way you present information is a lot easier to follow and use than other places. Thank you for the help!
Thanks for providing the code to help us improve our Web site. It’s through generous people like you that we’ve been able to avoid paying lots of money for programmers. Thanks!
i want to create a small search engine and wants to display the search result from the google or any other search engine into my search engine…. does anyone knows how to do that?
Hello, very nice, thanks, But can i also use this on offline pages? For html pages on my harddisk?
hi, i put the following codes into my website, and i intend to let people search a product in my site only.. please let me know if the following codes are correct for that???? plz do reply me..i badly need your reply…
I want to add my company name in google autocompletion search box. how can i?? for example, my company name is ‘fast ride calltaxi’, i want this in the autocompletion google search if i type just fast….
Thanks a lot!!!
Ravi, it’s because the program on the server that gets the search query is looking for ‘q’ as the name of the variable that contains the search word or term that you seek. Change it on the page and you also have to change the program to match.
Why should we only use name=”q” for the text input,
i tried to change but the search is not working when i change it, So can any one tell me why we should use “q” only.
I need the information because i am using this search box in my assignment.
Thank you.
TP, yes. What you need to do is append ” site:co.uk” to the end of the search pattern the user enters before you actually submit the search. I imagine the easiest way to do that would be to slip it into an OnClick event handler in the submit button. Good that phrase, you’ll see examples of what I’m talking about. 🙂