Ajax AutoComplete for jQuery

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields. Has no dependencies other than jQuery. The standard jquery.autocomplete.js file is around 2.7KB when minified via Closure Compiler and gzipped.

Ajax Autocomplete for jQuery supports local and remote data sets (JSON, XML and plain text), uses ajax method calls, allows to search, sort and match the response phrase. It lets you use a couple of different list templates and even offers you possibility to create your own list template. As one of the best jquery autocomplete plugins, Ajax Autocomplete for jQuery supports callback handles, so it can be configured to run functions on specific events. It has a couple of interesting, clean, modern build in css styles, so your autocomplete list can look really professional (no images requirement). The primary features of Ajax Autocomplete Plugin:

  • Lightweight: 3.4 kB of JavaScript – less than 1.4 kB gzipped
  • Fully flexible data source
  • Smart caching, delay and minimum character settings
  • Callbacks

Live Demo

1. Ajax Lookup

Type country name in english:

2. Local Lookup and Grouping

Type NHL or NBA team name:

3. Custom Lookup Container

Type country name in english:

4. Dynamic Width

Type country name in english:

How to Use

Add the css below to your html page

<link href="content/styles.css" rel="stylesheet" />

Create a container where you want to render AutoComplete

<div class="container">
    <h1>Ajax Autocomplete Demo</h1>

    <h2>Ajax Lookup</h2>
    <p>Type country name in english:</p>
    <div style="position: relative; height: 80px;">
        <input type="text" name="country" id="autocomplete-ajax"
            style="position: absolute; z-index: 2; background: transparent;" />
        <input type="text" name="country" id="autocomplete-ajax-x" disabled="disabled"
            style="color: #CCC; position: absolute; background: transparent; z-index: 1;" />
    </div>
    <div id="selction-ajax"></div>

    <h2>Local Lookup and Grouping</h2>
    <p>Type NHL or NBA team name:</p>
    <div>
        <input type="text" name="country" id="autocomplete" />
    </div>
    <div id="selection"></div>

    <h2>Custom Lookup Container</h2>
    <p>Type country name in english:</p>
    <div>
        <input type="text" name="country" id="autocomplete-custom-append" style="float: left;" />
        <div id="suggestions-container" style="position: relative; float: left; width: 400px; margin: 10px;"></div>
    </div>
</div>

<div style="width: 50%; margin: 0 auto; clear: both;">
    <h2>Dynamic Width</h2>
    <p>Type country name in english:</p>
    <div>
        <input type="text" name="country" id="autocomplete-dynamic" style="width: 100%; border-width: 5px;" />
    </div>
</div>

Load jQuery library together with the AutoComplete library into your code

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mockjax.js"></script>
<script type="text/javascript" src="src/jquery.autocomplete.js"></script>
<script type="text/javascript" src="scripts/countries.js"></script>
<script type="text/javascript" src="scripts/demo.js"></script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.