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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></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() {
  $('#tipue_drop_input').tipuedrop();
});

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": "http://www.jquert.com"},
     {"title": "jQuery Script", "thumb": "img/search.png", "text": "jQueryScript, a free jQuery plugin website", "tags": "JavaScript js", "loc": "https://www.jqueryscript.net/"}, 
     {"title": "About Tipue", "thumb": "img/about.png", "text": "Tipue is a small web development studio based in North London", "tags": "", "loc": "http://www.tipue.com/about"}
]};

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)

• update

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.