Simple jQuery Plugin For Search Suggestion Box - Tipue Drop

File Size: 120 KB
Views Total: 3840
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Plugin For Search Suggestion Box - Tipue Drop

Tipue Drop is a simple jQuery plugin that automatically provides custom suggestions as you type into the search box. 

How to use it:

1. Load the jQuery javascript library and jQuery Tipue Drop in the head section of your page

<script src=""></script>
<script type="text/javascript" src="tipuedrop/tipuedrop.js"></script>

2. Include tth basic default styles on the page

<link rel="stylesheet" type="text/css" href="tipuedrop/tipuedrop.css">

3. Create a search input box on the webpage

<input type="text" id="demo" autocomplete="off">

4. Call the plugin

$(document).ready(function() {

5. Include and Custom the Search Suggestions in the tipuedrop_content.js

var tipuedrop = {"pages": [
     {"title": "jQuery", "thumb": "img/search.png", "text": "jQuery", "tags": "JavaScript js", "loc": ""},
     {"title": "jQuery Script", "thumb": "img/search.png", "text": "jQueryScript, a free jQuery plugin website", "tags": "JavaScript js", "loc": ""}, 
     {"title": "About Tipue", "thumb": "img/about.png", "text": "Tipue is a small web development studio based in North London", "tags": "", "loc": ""}

6. Default settings.

// the amount of results to display
'show': 3,

// animation speed
'speed': 300,

// open in a new window
'newWindow': false,

// static or JSON
'mode': 'static',

// the path to the JSON data
'contentLocation': 'tipuedrop/tipuedrop_content.json'

Change logs:

v5.0.2 (2015-06-26)

v5.0.1 (2015-06-02)

  • update

v5.0 (2015-05-05)

  • update

v4.0 (2014-07-05)

  • update

This awesome jQuery plugin is developed by tipue. For more Advanced Usages, please check the demo page or visit the official website.