projects > drop search
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
- Simple Demo
- Rutgers University - Professional Development Institute ('search' box in sidebar on left)
- Chir.ag (yellow 'search' box on top-right)
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="https://chir.ag/projects/drop-search/drop-search.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://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
- Developer: Chirag Mehta, 18 Mar. 2009
- This text, algorithm, and design is copyrighted to Chirag Mehta, 2009.
- For reproduction / copyright information contact me.