Jquery Plugin For Search Box

If you are looking for a jQuery plugin to create a search box on your webpage, then this post is for you. This post will introduce two different versions of a search box using jQuery plugins.

This might not be useful to the larger majority of the audience but this is a small plugin which adds a search box to your blog which instantly filters and searches results on Google.

There’s many jQuery search plugins for WordPress and I’ve tried quite a few. I thought to myself..you could spend days, weeks and even months trying to find the perfect jQuery plugin. But let’s be honest, we don’t have that kind of time.

Jquery Plugin For Search Box

1. Ajax Live Search

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?

You can learn more about it in the following links:

Website
Source
Download

2. Semantic UI Search Component

Semantic-UI Search

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!.

Semnatic-UI Search Grouping Search

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

To learn more, visit the following links.

Download
Documentation
Demo

Find Your Dream Job

3. jQueryUI Autocomplete

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 );
    }
  });
} );

To learn more, visit the following links:

Source
Demo

4. DevBridge jQuery AutoComplete

Devbridge 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);
    }
});

To learn more, visit the following link:

  • Website
$3/month Sale

5. EasyAutocomplete

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"}

Leave a Comment