Easy jQuery Autocomplete Plugin with Character Highlight Support - immybox

immybox is a lightweight jQuery plugin that allows you to easily create autocomplete/autosuggest select boxes for text input fields. Enter a character into the text field and you will see a pre-populated list of suggestions, with support for character highlight.

Basic Usage:

1. Include jQuery library and the jQuery immybox plugin's stylesheet & JavaScript in the web page.

<link rel="stylesheet" href="immybox.css">

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.immybox.min.js"></script>

2. Create a regular text field on your web page.

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

3. Call the plugin on the text field you just created and create a pre-populated list of suggestions using Javascript array object.

$('#demo').immybox({
choices: [
  {text: 'Alabama', value: 'AL'},
  {text: 'Alaska', value: 'AK'},
  {text: 'Arizona', value: 'AZ'},
  ...
],

defaultSelectedValue: 'AL'

});

4. All the options and defaults

$('#demo').immybox({

// An array of choice objects used to populate the autosuggest list. 
// Each object should have at least text and value properties.
choices: [],

// The maximum number of choices to show in the autosuggest list.
maxResults: 50,

// Show a small down arrow on the right side of the input.
showArrow: true,

// Should the results list show on click, or wait for user input before showing.
openOnClick: true,

// The value that will be selected by default in the autocomplete list. 
defaultSelectedValue: undefined,

// A function for determining whether or not a choice matches the entered query. 
filterFn: function(query) {
  return function(choice) {
    return choice.text.toLowerCase().indexOf(query.toLowerCase()) >= 0;
  };
},

// A function for formatting choices.
formatChoice: function(choice, query) {
  var head, i, matchedText, tail, _ref;
  i = choice.text.toLowerCase().indexOf(query.toLowerCase());
  if (i >= 0) {
    matchedText = choice.text.slice(i, i + query.length);
    _ref = choice.text.split(matchedText), head = _ref[0], tail = 2 <= _ref.length ? __slice.call(_ref, 1) : [];
    return "" + head + "<span class='highlight'>" + matchedText + "</span>" + (tail.join(matchedText));
  } else {
    return choice.text;
  }
}

});

Change logs:

2015-01-07

• v0.4.1

2014-12-31

• Fixed a bug from unsanitized input to regex

---

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