A live search is an enhanced search form that uses AJAX technology to deliver results or suggestions within the same view. This is different from a regular HTML input field that is given autocomplete powers from a modern browser like Chrome, Firefox or Safari. A live search is often an input field that has been programmed to load suggestions from a specific dataset.

July 6th, 2017: This article was rewritten to update the list of plugins, and include some bonus, non-jQuery libraries.

Using live search in your application greatly improves the user friendliness of your site. Whatever back-end technology you are using — PHP, Java, Python, Ruby — JavaScript is your best bet in implementing a client-side live search feature.

Before I proceed, I would like to point out that the term live search is a bit ambiguous. There’s no authoritative definition for that term. Other terms that are frequently used to mean the same thing are autocomplete and type ahead.

I’ve come across a number of solutions labeled as live search which lack certain critical features. For this article, I’ll only shortlist live search solutions that fit the definition I’ve defined above.

1. Ajax Live Search

The first one on this list is a pretty amazing open-sourced, live search jQuery plugin. It is well documented and works perfectly in Chrome, Firefox, Safari, Opera, and IE8. The most impressive feature is that it can return results in the form of a paginated table!How cool is that?

2. Semantic UI Search Component

If you are into CSS frameworks, you should check out Semantic UI. They have a cool Search Component that allows you to implement live search on your forms very easily. Just take a look at this example code:

HTML:

<div class="ui search">
  <input class="prompt" type="text" placeholder="Search GitHub...">
  <div class="results"></div>
</div>

JavaScript:

$('.ui.search')
  .search({
    apiSettings: {
      url: '//api.github.com/search/repositories?q={query}'
    },
    fields: {
      results : 'items',
      title   : 'name',
      url     : 'html_url'
    },
    minCharacters : 3
  })
;

It’s amazingly minimal yet powerful. If you use the API settings option, you can do customizations such as grouping results into categories!.

Semantic UI also comes in different flavors specifically built for React, Meteor, Ember, and Angular. Check out their integrations page for the full list.

3. jQueryUI Autocomplete

This is a jQuery widget that is part of the jQuery UI library. The library itself is a curated set of user interface components, effects, and themes built on top of jQuery.

Autocomplete comes with several templates to provide different implementations. Here is one such example:

HTML:

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

JavaScript:

$( function() {
  function log( message ) {
    $( "<div>" ).text( message ).prependTo( "#log" );
    $( "#log" ).scrollTop( 0 );
  }

  $( "#birds" ).autocomplete({
    source: "search.php",
    minLength: 2,
    select: function( event, ui ) {
      log( "Selected: " + ui.item.value + " aka " + ui.item.id );
    }
  });
} );

4. DevBridge jQuery AutoComplete

The DevBridge jQuery AutoComplete is a tiny JavaScript library that allows you to turn regular text input fields into autocomplete suggestion boxes. Its API is vast and well documented allowing you to perform quite a number of different configurations. Implementing it is quite simple, check out this example:

HTML:

<input type="text" name="country" id="autocomplete"/>

JavaScript(AJAX lookup):

// AJAX Lookup
$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

JavaScript(Local lookup):

var countries = [
   { value: 'Andorra', data: 'AD' },
   // ...
   { value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

5. EasyAutocomplete

EasyAutocomplete is a highly customizable jQuery autocomplete plugin with all the commonly required features. It supports local and remote data sets in JSON, XML, and plain text formats. It also supports callback handlers along with some default styling.

What sets this plugin apart is their templates feature. Templates are used to define the results view. You can create a custom template or use one of the available built-in presets which include:

• Description Template
• Icon Right/Left Template
• Link Template

Implementing a basic autocomplete with this plugin is quite easy, see the following example code:

HTML:

<input id="countries"/>

JavaScript:

var options = {

  url: "resources/countries.json",

  getValue: "name",

  list: {
    match: {
      enabled: true
    }
  },

  theme: "square"
};

$("#countries").easyAutocomplete(options);

JSON:

[
  {"name": "Afghanistan", "code": "AF"},
  {"name": "Aland Islands", "code": "AX"},
  {"name": "Albania", "code": "AL"},
  {"name": "Algeria", "code": "DZ"},
  {"name": "American Samoa", "code": "AS"}
 ]

6. PixaBay jQuery-autoComplete

Pixabay.com, a free stock site, have an awesome open-source autocomplete jQuery plugin you can use for your project. Originally they were using DevBridge’s jQuery Autocomplete (no 4. in the list). Later they created a fork and started updating it to meet their own needs. Eventually, they did so much hacking into the original source code they ended up with their own ultra lightweight optimized plugin.

The plugin is only 1.4 kB compressed with support for multiple data sources, callbacks and features a smart caching system. Here is an example implementation of the plugin:

JavaScript:

$('input[name="q"]').autoComplete({
  source: function(term, response){
    $.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
  }
});

To learn more, visit the following links:

• Demo
• Source
• Download

7. Marco Polo

This is a jQuery autocomplete plugin that was developed out of frustration for lack of reliable autocomplete plugins at the time. It features quality documentation, caching, memory selections, custom styling, callback handling, and WAI-ARIA support. It requires jQuery v1.4.3 or higher and supports all modern browsers (and even IE6!).

Implementing Marco Polo is quite simple. Here is a sample implementation:

HTML:

...
<head>
  <script src="jquery.min.js"></script>
  <script src="jquery.marcopolo.min.js"></script>
</head>
...
<body>
  <input type="text" name="userSearch" id="userSearch">
</body>

JavaScript:

$('#userSearch').marcoPolo({
  url: '/users/search',
  formatItem: function (data, $item) {
    return data.first_name + ' ' + data.last_name;
  },
  onSelect: function (data, $item) {
    window.location = data.profile_url;
  }
});

JSON(Source data):

[
  {
    "first_name": "James",
    "last_name": "Butler",
    "profile_url": "/users/78749",
  },
  {
    "first_name": "Win",
    "last_name": "Butler",
    "profile_url": "/users/41480",
  },
]