Tipue drop

Tipue drop is a search suggestion box jQuery plugin


Tipue drop

Tipue drop is a search suggestion box jQuery plugin. It's free and open source.
Version 5.0.2

Tipue drop is also on GitHub.


Enter tipue into the search box.

Only jQuery

Tipue drop only needs a reasonably modern browser and jQuery. 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 loads jQuery via Google. The remaining lines load the site content to be searched, the Tipue drop CSS and the Tipue drop jQuery plugin.

The code below displays 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. If you're not familiar with JavaScript objects, note that the last record doesn't end with a comma. Some characters may need to be escaped, such as " or \. These should be preceded with a backslash.

The thumbs are rounded and set with a width and height of 50 pixels, so your images should be square and at least 60 pixels wide.

The text field includes search terms that don't appear in the title. It should be left empty if not needed, rather than omitted.

JSON mode

JSON mode uses JSON for site content. Your site has to be installed on a web server for JSON mode to work.

We recommend using Static mode (a JavaScript object) wherever possible, as it's faster.

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 compatibility

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.