Tipue drop

Tipue drop is a search suggestion box jQuery plugin


Tipue drop

Tipue drop is a search suggestion box jQuery plugin. It's open source and responsive.
Version 4.0
For a demo, enter tipue into the search box below
Tipue drop is also on GitHub.

Only jQuery

Tipue drop only needs a browser that supports jQuery, it's responsive and works on all reasonably modern browsers. Tipue drop is open source and released under the MIT License, which means it's free for both commercial and non-commercial use.

Getting Started

Copy the Tipue drop folder to your site and include the following in the <head> section of your page.
The first line loads the Open Sans font from Google Web Fonts, which is optional. The second line loads loads jQuery via Google Hosted Libraries. You can host the jQuery library locally if you prefer. The remaining lines load the site content to be searched, the Tipue drop CSS and the Tipue drop jQuery plugin.

Also included in the download package is tipuedrop.min.js, a compressed release of the main tipuedrop.js plugin. You should use this if you don't intend to make any changes to the code.

Below is the HTML to display the search box.

Tipue drop can work as an additional feature to your current site search. The #tipue_drop_content selector is fixed, and the autocomplete attribute should be set to off. That aside, you can use any text input with Tipue drop. Below is an example with a search script.
Finally, you need to call the .tipuedrop() method. Include this towards the end of the page.

Tipue drop content

The pages to be searched are held in the tipuedrop_content.js file.
The format is a JavaScript object literal, or JSON. If you're not familiar with JSON, note that the last record doesn't end with a comma.

The thumbs are initially set with a width of 60px, which can be changed in the CSS. The tags field can include search terms that don't appear in the title and text fields. It should be left empty if not needed, rather than omitted. Some characters may need to be escaped, such as " or \. These should be preceded with a backslash.

JSON mode

JSON mode uses Ajax to load JSON. If you have thousands of pages and you can export the textual content of your site to JSON, Tipue drop is very, very fast after the initial load.

You have to run JSON mode on a web server.

Include the following in the <head> section of your page.

Your content should be stored in a file in JSON format.
Finally, you need to call the .tipuedrop() method with the mode set to json and the name and location of your JSON file.


The options for Tipue drop are set as arguments in the .tipuedrop() method.

The number of results displayed. The default is 3.


The speed the window displays, in milliseconds. The default is 300.


Results open in a new browser tab if set to true. The default is false.


The mode for loading content. The value can be 'static' or 'json'. The default is 'static'.


The name and location of the JSON file if using JSON mode. The default is 'tipuedrop/tipuedrop_content.json'.

Browser support

Tipue drop works with Chrome 31+, IE9+, Firefox 35+, Safari 7.1+ and Opera 27+.


We offer a range of flexible support plans for our jQuery plugins, including free.
© 2015, Tipue. Made in London.