Autocomplete demos

Using JSON as a source of suggestions

The simplest possible approach to provide autocompletion data is passing an array of suggestions.

<input id="json-source" type="text" class="form-control" />
var source = [ 'ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'Clojure', 'Ceylon', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme' ];

$('#json-source').autocomplete({ source: source });
Using a function as a source of suggestions

Much more powerful is definition of a suggestions by providing a function.

Function takes two parameters:

  • request - the search request in a form {{ term: 'searchTerm' }}
  • response - a response function which should be called once suggestions are ready

The response function can be called asynchronously. This gives us opportunity to load the data via REST API, AJAX or websocket channel.

Passing a function also allows us to compute suggestions from local data.

<input id="function-source" type="text" class="form-control" />
var asyncSuggest = function (request, response) {
  setTimeout(function () {
    response($.ui.autocomplete.filter(source, request.term));
  }, 1000);
};

$('#function-source').autocomplete({ source: asyncSuggest });
Using a ordered/unordered list as a source of suggestions

For some use cases, it might be beneficial to use DOM as a source for suggestions.

The natural way to describe list of available suggestions is unordered or ordered list.

<input id="list-source" type="text" class="form-control" />

<ul id="list-suggestions" style="display: none">
  <li><i class="fa fa-heart"></i> Java</i></li>
  <li><i class="fa fa-flag"></i> Haskell</li>
</ul>
$('#list-source').autocomplete({ source: '#list-suggestions' });
Table layout with a table as a source of suggestions

By using <table>, we can simply achieve table-based layout for suggestions.

<input id="table-source" type="text" class="form-control" />

<table id="table-suggestions" style="display: none">
  <tbody>
    <tr data-label="Java">
      <td><i class="fa fa-heart"></i></td>
      <td>Java</td>
      <td><i>my favorite language</i></td>
    </tr>
    <tr data-label="Haskell">
      <td><i class="fa fa-flag"></i></td>
      <td>Haskell</td>
      <td>functional language</td>
    </tr>
  </tbody>
</table>
$('#table-source').autocomplete({ source: '#table-suggestions' });
Caching suggestions

No matter what source of suggestion you use, you can always cache responses so that the client won't need to reach the server in case user repeats the search.

In this demo, you will perceive a 1 sec. delay for first request. But if you repeat the same search, you will get immediate answer.

One need to provide cached flag and setup minLength which declares how long the user input needs to be to reach server.

It is also possible to pass custom caching provider using cacheImplemenation option. Default implementation is $.ui.autocomplete.objectCache.

<input id="cached" type="text" class="form-control" />
$('#cached').autocomplete({
  cached: true,
  minLength: 2,
  source: function (request, response) {
    setTimeout(function () {
      response($.ui.autocomplete.filter(source, request.term));
    }, 1000);
  }
});
Auto-Focus

When auto-focus option is used, the first available suggestion is pre-selected so that user doesn't need to use an arrow and can confirm a suggestion immediately.

<input id="auto-focus" type="text" class="form-control" />
$('#auto-focus').autocomplete({ source: source, autoFocus: true });
Auto-Fill

Selected suggestion can be auto-filled into input as a user steps through suggestions.

<input id="auto-fill" type="text" class="form-control" />
$('#auto-fill').autocomplete({ source: source, autoFill: true });
Auto-Focus Auto-Fill

The combination of both previous options: auto-filling and auto-focus

<input id="auto-focus-fill" type="text" class="form-control">
$('#auto-focus-fill').autocomplete({ source: source, autoFocus: true, autoFill: true });
Support for tokenizing

The basic support for tokenizing allows to auto-complete several values which are separated by one of specified tokens.

<input id="token" type="text" class="form-control" />
$('#token').autocomplete({
  source: source,
  token: ',',
  minLength: 1
});
Autocomplete can have a button

Autocomplete has built-in functionality for adding a button to the input so user can open a list of suggestions by mouse.

<input id="button" type="text" class="form-control" />
$('#button').autocomplete({
  source: source,
  showButton: true
});
Updating of DOM-based suggestions

DOM based suggestions doesn't have to be static - when user changes input, we can request update of a DOM, but at the end, we need to request update of suggestions.

Autocomplete provides update callback, which has two parameters:

  • request - the search request in a form {{ term: 'searchTerm' }}
  • done - a function which must be called once DOM is updated, indicating that the suggestions may be reloaded
<input id="updatable" type="text" class="form-control"/>

<ul id="updatable-suggestions" style="display: none">
  <li>Java</li>
  <li>Haskell</li>
</ul>
var counter = 1;

function updateDom() {
  $('#updatable-suggestions').append($('<li>Test' + counter++ + '</li>'));
}

$('#updatable').autocomplete({
  source: '#updatable-suggestions',
  update: function (request, done) {
    setTimeout(function () {
      updateDom();
      done();
    }, 1000);
  }
});