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!
Hi, I would like to add a search that only returns .co.uk sites. Is this possible please??
Thank you
i want to search top t0 tweats with the keyword i enter on my website and the results should be display on my website..??
can u show how can i do it???
thanx its grear to us this script its v simple and easy to use best wishes to script writer
Nice job with that, KKreiven!
This is my version for mobile sites…
<form method=”get” action=”http://www.google.com/m/search”>
<input type=”text” name=”q” size=”19″
maxlength=”255″ value=”Google it” style=”font-size:x-small” /><br/>
<select name=”site” style=”font-size:x-small”>
<option value=”mobile”>mobile</option>
<option value=”universal”>net</option>
<option value=”images”>image</option>
</select>
<input type=”submit” value=”Go” style=”font-size:x-small” />
</form>
Can I use this code on a subdirectory within my main domain? Or better yet can this code be used to only search a specific html page and not the whole domain?
Hi this is my 1st website
Hi Don
> Anyone have any ideas or links I can go to work through this?
BTW there’re other services that have better support and more interesting features. Like for example http://getwebsitesearch.com/
I purchased the google search engine, went through the setup steps, copied the code into my test page. Put it on my server and when I go to that page, it says “Loading” for a second, then nothing.
When I view the source code the code they supplied is there, just nothing on the page.
I looked at their “support forum” and almost nobody has posted in almost a month. And I was logged in, submitted my post. Saw it in that forum category, now I go back to make an edit, and my post is gone.
Thanks Google. Almost no support and the simpliest test does zilch.
Anyone have any ideas or links I can go to work through this?
Thanks in advance,
Don
Hi. The above information has been very useful for me. The only thing I am concerned with is — Can i place an Image of magnify glass instead of search button. If so can anyone please help me with the same.
Hey Dave,can you please tell me why ‘name=”q”‘has been used as I have used this bar in my assignment ?
Hi Dave….
This is Kumargaurav from Master in computer application i want to know
1.How i can create a google document ?????
2.Create a blog & give a post on it….???
When a user enters a query in my output screen it must be directed to the google search engine and only the “Searches related to” terms should be displayed to the user in turn.Please provide me the coding.It will be very much helpful if you provide it.
Hi, I’ve created acustom search engine in Google to look up websites that I want in it, I copied the code they gave me and put it onto a website called RM Platform, it worked for one area of the site, but I can’t make it work in any other page. The code is as follows:
Loading
google.load(‘search’, ‘1’, {language : ‘en’, style : google.loader.themes.ESPRESSO});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var customSearchControl = new google.search.CustomSearchControl(
‘006699539649831328642:kkdv_pqcshw’, customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw(‘cse’);
}, true);
Hi, what I’d like is to add a specific phrase to searches. So if viewer types ‘Washington’ the search results are for ‘Washington “Pet Supplies”‘. Likewise, if the viewer types ‘Boston’, the results are for ‘Boston “Pet Supplies”‘.
I’d be really grateful for any guidance on how to do this. Thanks
Hi Dave,
How can i open top 5 searches in new window when i click **Google Search** from my website.
Sir is thier any way top get the reults in my web page only is their any way to migrate the results into my webpage
Site is here:-
http://www.clannersarena.com
Sir please help me as i am very much in need of this information………….
Vaibhav dev
Hi there, Dave,
I used your google search box, with some modifications and noticed that the check box is on by default and when searching my page it cannot find pages with in my main page. Any suggestions?
Cheers!
Javi
Larry, I don’t really understand. If you’re going to have a page that just shows search results, why wouldn’t people just go to Google and get the results straight from the source?
If I have a website named PetShopsInSanDiego.com, for instance, and when someone visited my site they would see a Google Search showing the Pet Shops only in San Diego without them typing anything into a Search Box; how would I do that?
I’ve been searching for code to do that with no results and I ran across your site, hoping for some insight – or code. Any help would be appreciated.
Dave,
I figured out an alternate solution of hiding both the magnifying glass icon and the words. Now my final problem is that it is not doing a full site search.
I set the sitesearch to “iwarmbars.com” and it is only searching the index page, not additional pages connected to the site (/faq, /contact, /about, etc.).
Did I miss something?
Thanks again!
Chelsea
Chelsea, it is indeed possible that you’ll end up messing around with CSS. There’s a CSS attribute called “crosshair”, as described here: http://www.w3schools.com/cssref/pr_class_cursor.asp
Tim, what you seek is really easy because the words “only search Ask Dave Taylor” isn’t part of any form tag. So leave the <input> as is, but wrap the “only search…” element with something like this:
<span style=”color:green; font-weight:bold;”>only search Ask Dave Taylor</span>
Should be straightforward!
DAVE,
How do I change the font color of the “Only search dave taylor” in your code?
Thanks.
Tim
Additional note:
If I do “input type=hidden” it removes the words AND the magnifying glass icon (still able to search). It’s not crucial, I suppose, but I’d also like to have the magnifying glass icon. Is it possible that I will have to tinker around in the css and/or js files or is there a simple solution?
Thanks again!
Chelsea
Hi Dave,
First of all, thank you for your help. If you’ll look at the Web site I’ve attached (still working on it), you’ll be able to see the search bar I’m working with. It is part of the design so all I was trying to do was set it up to actually WORK and it does with your help, BUT since adding the value=”iwarmbars.com” so it only does a site search, it actually adds those words over the design (I know, I know, this is purely superficial). Is there any way to make that hidden?
Thanks in advance!
Chelsea
The best way is to use Google Custom Search !
hi dave ..
I embedded the site search code
it works fine ..
thanks..
Hi and thanks. I’ve been trying all sorts of ways to do the below and can’t, could you please help, thanks.
The string below will search for The Beatles, as an example. I want a search box so the user only has to enter the artist they are searching for:
https://www.google.com/search?q=-inurl%3Ahtm+-inurl%3Ahtml+intitle%3A%22index+of%22+mp3+%22The+Beatles%22
Hi
I was just juggling around with adding the google custom search + adsense code on my site and I found your post. Now, I tried both the adsense code and your code for search results and found that your code gives better results as compared to the adsense. Is there any way of combining yours and adsense code so that ads revenue is earned as well as I get better results on my search queries. Also, is adsense not giving good results because of its need to crawl the site thoroughly??? I have a new adsense account so I don’t think it has crawled my site entirely. What’s your advise?
Thanks
Hi, I Installed Google search in my website landing page , i want to display search result in searchresult.hmtl
please send in detail
Hi Dave
I am trying to customise a web host search box for my website, the facility works well, but the look does not! (hence why I haven’t uploaded to the site yet)
[form action=”http://www.bellewaarde1915.co.uk/search/ksearch.cgi” method=”get” name=”search”]
[p align=”center”][input type=”text” size=’15’ name=”terms” value=”” onFocus=”select(this);”/]
[input type=”submit” value=”Search”/][/p]
[/form]
Every time I try and change things I mess it up so that it doesn’t work.
What I want to do is colour the border #cc9933, change the background to #4b3e11.
The page that the results populate has been set so that the background colour matches the form and I have set all font colours to render #cc9933, however, only some do this, others are the standard colours of links.
I would appreciate any help at all.
hi Dave,
I am doing my post graduation in India.My project domain is web mining.I have some doubts regarding coding…
1.I should design a web search engine that should display the google results in my web site itself.
2.Along with the google results i should be able to show my query recommendations when the user clicks a link.
3.The most important is that my recommendations along with user query should be again fed into the google search engine and the results should be displayed to the user.
What i have done is:
1.I have created a search engine.After the query is given it is getting redirected to the google search engine.
2.I have used an algorithm for providing query recommendations.I just want to be displayed in a separate web page when a user clicks through a link.Please do help me…
Thanks in advance…
Hey Dave!!!! Thanks for the code. It really works..
Is there a way to make it so that you do not need check box and that it will only search your site?
What is the difference between this and google’s sitesearch program. When I fill theirs out it looks the same then it says there is a yearly charge on the last page. Thx
Hi Dave,
Is there such a thing as a Latest Google Search Results Box that displays results for a pre-determined search string, i.e. U2?
A new search would be done and the results refreshed whenever the page reloads and contain, say, 10 results.
Thanks,
Tom
Very helpful. I was getting a blank page because (I think) my site is using frames. I added the suggested line: target= “_blank” and all was good again.
Hey! Dave I want that on clicking ‘about me’ the link directs the viewer to a page suggested by me.How could it be possible? Please reply me soon.
Hi there Dave
First of all may I say many thanks for a brilliant site, especially about about using the google search.
I have one little niggle that you may be able to help with (well I have another actually but am seeing a doctor about that one!) When I have put in what is being searched for and get the results (opens in a new page) when I go back to the main page the search words are still there. The question is “Is there a way of automatically clearing the box ready for the next one?”
TIA
Martyn
i like it you post thank you very much
dude,
really looooooooooooong time passed for posting this article…….
7 years….ha…..
🙂
Awesome share !
is there any way i can put the code into my own search box i did?, if so please help
Thanks Dave
You are a star..simple info and explained well
Cheers
Paul
Hey Dave! Thank you so much for this, it is awesome!
I just wonder if you can make a search box that ONLY search on my website? With no check box or radio botton?
Thank you, again!
Hi Dave. Thanks for this tip on making a search box that ACTUALLY works well on Blogger. I have tried a number of different ones that didn’t work or worked poorly. Sending the search for my site only to Google search is a fantastic way of doing it. Once again Thanks Heaps!!!
Thank very much for your info
I tried using this code and it looks fine in iweb but when I load it to the internet it’s shows up as a hit counter that I used to have on the page. Any suggestions on how to fix?
I recently got sick and tired of all the constant changes on my Google homepage. I like a nearly blank page to start with when I start surfing, because every site is trying to distract you with nonsense mostly. Now Google is constantly putting up new suggestions to try this and that, so I created my own home page with the simple search box you provided and I modified the links down to three: web, images and maps. What a beautiful and relaxing page (with my own background image) and no clutter! Thank you thank you, you’re a life saver.
Dave… Please man just put a simple code in your blog here for people who just want a simple code for just the search box and the button. Not much to ask huh? Thanks big guy appreciate it much.
I want to join this plus other websites and I would like to use the same email addressandpassword for a
L