Close
Tipue drop

Tipue drop

Tipue drop is a search suggestion box jQuery plugin. It's open source and responsive.
Version 3.1
DownloadDemo
Also on GitHub.

Only jQuery

Tipue drop only needs a browser that supports jQuery. Tipue drop is 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.

Support

We offer a range of flexible support plans for our jQuery plugins.
More

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 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.
You need to add the following as the first line in the <body> section of your page.
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.

Options

The options for Tipue drop are set as arguments in the .tipuedrop() method.
show
The number of results displayed. The default is 3.
maxWidth
The maximum width of the window, in pixels. The default is 240.
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.
jQuery plugins
See our other jQuery plugins.
More
© 2014, Tipue. Made in London. post@tipue.com TOS