Drop Search

Drop Search makes it very easy to add a powerful, customized search engine to your site, using Google AJAX Search API. Making a good search engine for your site is not easy and Google does a pretty good job at it so why not use it?

There is almost no programming required and anyone with basic-level web development experience can copy-paste the sample code below to their website and make it instantly searchable.

In addition to using mouse, keyboard arrows can also be used to select the search results. Enter and Escape keys work as expected too.

Live Demo of Drop Search

Download Drop Search Locally (optional)

If you download these two files locally, you can customize the functionality and appearance however you want:

Drop Search Javascript - 6kb



Drop Search CSS - 2kb (Just right-click and 'Save Target As' or similar.)

Credits

Drop Search is powered solely by the awesome Google AJAX Search API.

Optionally, you may want to sign up for a Google AJAX Search API Key and use this API key in the 'gkey' parameter.

License

The Drop Search library is released under the Creative Commons license.

Please read and adhere to the Google AJAX Search API Terms of Use.

While I use code and algorithms from various sources, I always respect the code license and give credit where it's due. If you think that I am using your code/algorithm without the appropriate license, please let me know.

Sample HTML Code

<html>

<head>

<link rel="stylesheet" type="text/css"

href="http://chir.ag/projects/drop-search/drop-search.css">

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript"

src="http://chir.ag/projects/drop-search/drop-search.js"></script>

<script>

$(function() { // edit this section as necessary:



// #id or .class of the search box

$("#ds").dropSearch({

basedomain: "cnn.com", // which domain to search

inittext : "search cnn", // the default text in the search box

filter : "-video", // ignore/require specific keywords

align : "left", // position of the dropdown list

relative : false, // set to true if within a relative div/container

width : "300", // should be at least 250px

gkey : "" // please enter your google ajax api here

});



});

</script>

</head>

<body>

<ul><input id="ds" type="text" value="search cnn" /></ul>

</body></html>

Documentation

For help and documentation on how to use the Drop Search, view the sample code above.

Due to time constraints, I cannot write detailed documentation for Drop Search. However, feel free to email me for further information, technical questions, ideas, improvements etc.

Disclaimer