How to Make a Search Form With Multiple Search Options
This page explains how to create a form like the one below, allowing the user to select which search engine they would like to use to perform a search.
This method takes advantage of the query string used by most search engines. The query string is the part of the URL which normally comes after the question mark when a search is performed. For example, if you do a Google search for "Darth Vader", you will notice the URL in the address bar changes to something like:
http://www.google.com/search?q=darth+vader
There will probably be a bunch of other stuff as well, but this is the important part.
The multi-choice search form works by taking the users' search terms and appending them to the URL of the selected search engine.
Step 1 - List of Search Engine URLs
First of all you need to decide which search engines to include. You can only use search engines which use query strings, so you must check each search engine to make sure they do this. It's not hard -all you have to do is perform a search and see what happens to the URL. If your search terms show up in the URL then you can use this search engine.
Next, find out exactly how the query string is structured for each search engine. Perform a search, then copy the entire URL up to the point where the search terms appear. You will end up with a list looking something like this:
http://www.google.com/search?q=
http://www.altavista.com/web/results?q=
http://www.dogpile.com/info.dogpl/search/web/
http://search.yahoo.com/search?p=
Step 2 - Search Form
The code below makes up the search form. Copy this into your web page and insert the search URLs from your list as the option values, one search engine for each option.
<form name="searchform" onSubmit="return dosearch();">
Search:
<select name="sengines">
<option value="http://www.google.com/search?q=" selected>Google</option>
<option value="http://www.altavista.com/web/results?q=">Alta Vista</option>
<option value="http://www.dogpile.com/info.dogpl/search/web/">Dogpile</option>
<option value="http://search.yahoo.com/search?p=">Yahoo!</option>
</select>
For:
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
</form>
Step 3 - JavaScript Function
And finally, place the following javascript in the head of the page:
<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
</script>
Note: To make the search results page open in a new window, replace the line
window.location.href = submitto;
with:
window.open(submitto);
That's it - you're ready to go! If you have any problems or questions, please ask in our Web Design Forum.
Related forum threads:
- www.mediacollege.com/forum/showthread.php?932-Search-engine-question
- www.mediacollege.com/forum/showthread.php?9037-Multiple-search-question
For advanced users...
This script can be further customised to suit particular search engines. For example, some search engines place the search terms in the middle of the query string - in this case you would need to create more variables and the code would be a little more complex.
You could also give the form a default action which would only happen if the user has JavaScript disabled.