Tipue drop

Tipue drop is a search suggestion box jQuery plugin

Download

Tipue drop

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

Tipue drop is also on GitHub.

Demo

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.
HTML
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.

HTML
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.
HTML
Finally, you need to call the .tipuedrop() method. Include this towards the end of the page.
HTML

Tipue drop content

The pages to be searched are held in the tipuedrop_content.js file.
JS
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.

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

Options

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

The number of results displayed. The default is 3.

speed

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

newWindow

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

mode

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

contentLocation

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+.

Support

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