Google Style Search Suggestion Plugin For jQuery - Suggestion Box

Suggestion Box is a simple, flexible, customizable jQuery plugin for displaying a Google-style suggestion box under the search field while user is typing.

How to use it:

1. Include jQuery library and the jQuery suggestion box plugin's JS and CSS on the html page.

<link rel="stylesheet" href="suggestion-box.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="suggestion-box.min.js"></script>

2. Create a normal search field on the page.

<input type="text" id="search">

3. Initialize the plugin and load suggests from a JSON file.

$('#search').suggestionBox().loadSuggestions('demo.json');

4. The sample JSON data.

{
  "results": [
    {
      "suggestion": "Fender Standard Stratocaster",
      "url": "#"
    },
    {
      "suggestion": "Fender American Deluxe Stratocaster",
      "url": "#",
      "attr" : [
        {
          "class" : "suggestion"
        }
      ]
    },
    {
      "suggestion": "Fender Telecaster",
      "url": "#"
    },
    {
      "suggestion": "Fender Jaguar",
      "url": "#"
    },
    {
      "suggestion": "Fender Jazzmaster",
      "url": "#"
    },
    {
      "suggestion": "Gibson Les Paul",
      "url": "#"
    },
    {
      "suggestion": "Gibson SG",
      "url": "#"
    }
  ]
}

5. Customization options with default options.

// suggestion boxes' top position
topOffset: 0,

// suggestion boxes' left position
leftOffset: 0,

// suggestion boxes' width
widthAdjustment: 0,

// The number of milliseconds to wait until to consider the user to have stopped typing. 
// An ajax call to the given suggestion url will be made after this time.
delay: 400, 

// The heading displayed in the suggestion box
heading: 'Suggestions',

// The maximum number of results to display in the suggestion box
results: 10,

// enable a fade in effect
fadeIn: true,

// enable a fade out effect
fadeOut: false,

// 'auto': will calculate the width based on the content
// 'constrain': will set the width to the size of the search box and constrain the content to it.
menuWidth: 'auto',

// Shows the noSuggestionsMessage when no suggestions can be found
showNoSuggestionsMessage: false,

// The message to be shown when no suggestions have been found and showNoSuggestionsMessage is true
noSuggestionsMessage: 'No Suggestions Found',

// apply the filterPattern to the suggestions as the user types
filter: false,

// A regex expression to apply using the filter. Use {INPUT} to inject the user input in to the pattern
filterPattern: "({INPUT})",

// callbacks
ajaxError: function (e) {
  console.log(e);
},

ajaxSuccess: function (data) {
},

enterKeyAction: function () {
  goToSelection();
},

// The parameter name you would like to use in your query string for requests
paramName: 'search',

// The url of the JSON or server side script where you would like to make an ajax call to get the suggestions
url: null,

// A sort function to sort filtered results, this is passed directly into javascripts' native sort function if supplied (only works when filter is on)
sort: null

Change log:

2015-11-17

• Bug Fix

---

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