x Close
Home
About
jQuery plugins
Blog

Tipue drop

Tipue drop is a search suggestion box jQuery plugin

Download
Tipue drop

Tipue drop

Tipue drop is a search suggestion box jQuery plugin. It's open source and responsive.
Version 4.0
Download
For a demo, enter tipue into the search box below
We're 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.
HTML
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.

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

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

Browsers

Tipue drop supports IE 9 and above, along with recent versions of Google Chrome, Firefox, Safari and Opera.

Support

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