|
|
Adding A More Defined Search To Your Google Search Bar
By Dave Taylor
Expert Author
Article Date: 2009-12-18
I have a Google search box on my site, thanks to your article How to add Google Search to Your Site, but want to automatically add a few words to the search string that the user enters. Is that even possible? If so, how do I modify the JavaScript code to make it work?
Dave's Answer:
Great question, and one that's come up quite a few times since I wrote that original Google search code. Seems like it's popular to not only have a search box on your site, but to tweak the actual search that you send to Google. Who knew? :-)
Accomplishing this task, however, is quite a bit more complicated because what we have to do is actually tweak the form itself so that the word or words are grafted onto the search after the user has clicked the submit button but before the data is actually sent back to Google.
I asked a developer friend of mine, Luke Kingland, to help out and he describes his solution thusly:
"Instead of the user entering search terms directly into the "q" field that Google will read, we're going to have the user first enter their search terms into a temporary field named "custom_terms". The JavaScript that is then run when the user clicks "Submit" assembles the value for the "q" field (which is hidden) by setting it to both what the user typed in and the value of "additional_terms", which the site owner hard codes on the page."
Makes sense to me. Let me show you his solution. The first thing is that we now need a JavaScript function to assemble the different elements and send along the form itself. That needs to appear within the "<head>" of your Web page and looks like this:
<script>
function runsearch( form ) {
// extra terms to include on every search
var additional_terms = "wiki";
// terms the user entered
var entered_terms = document.getElementById( "custom_terms" ).value;
// set the search field to be both custom terms and additional terms
var all_terms_field = document.getElementById( "all_terms" );
all_terms_field.value = ""+entered_terms+" "+additional_terms;
// submit the form;
form.submit();
}
</script>
That's the complicated part and I've marked in bold where you'd put in the word or words (use a "+" rather than a space if you specify a phrase) you want to have automatically added to the search.
Well, the form gets a bit of a tweak too:
<form id="search_form"
method="get"
action="http://www.google.com/search"
onsubmit="runsearch(this);return false;">
<input type="hidden" name="q" id="all_terms" />
<input type="text" id="custom_terms" class="display" name="display" size="25" />
<input type="submit" class="submit" value="Google Search" />
<div class="footer">
<input type="checkbox" name="sitesearch" value="askdavetaylor.com" checked="checked" />
<span> only search Ask Dave Taylor</span>
</div>
</form>
What's it look like? Let's check it out. I'll automatically add "help" to any search you enter below:
Cool, isn't it? Hope that's helpful to you!
Thanks to Luke Kingland over at Sigrun Labs for his help with this coding project.
Comments
About the Author:
Dave Taylor is known as an expert on both business and technology issues.
Holder of an MSEd and MBA, author of twenty books and founder of four
startups, he also runs a marketing company and consults with firms
seeking the best approach to working with weblogs and social networks. Dave
is an award-winning speaker and frequent guest on radio and podcast
programs.
AskDaveTaylor.com
http://www.intuitive.com/blog/
|
|
