JQuery UI Autocomplete: limit results, search from the beginning and submit form on selection

Jquery UI Autocomplete

The Autocomplete widgets provides suggestions to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. http://jqueryui.com/autocomplete/
By default, jQuery UI Autocomplete doesn’t submit Form on selection, and it filters through the list matching the term everywhere in the word.

Simple autocomplete

A simple Jquery UI autocomplete

Html Form:

<form id="searchForm" action="#your_link" name="searchForm">
    <input id="search" name="search" type="text" />
    <button type="submit">Search</button>
</form>

Javascript:

$(function() {
    var tags = [
      "hello","hi", "halló", "bonjour", "bom dia", "buenos días"
    ];
    $( "#search" ).autocomplete({
        source: function(request, response) {
            var results = $.ui.autocomplete.filter(availableTags, request.term);
            response(results);
        }
    });
});

Limit results

To limit results, you can simple slice results.
Javascript:

$(function() {
    var limit = 20;
    var tags = [
      "hello","hi", "halló", "bonjour", "bom dia", "buenos días"
    ];
    $( "#search" ).autocomplete({
        source: function(request, response) {
            var results = $.ui.autocomplete.filter(availableTags, request.term);
            response(results.slice(0, limit));
        }
    });
});

Search from the beginning

var results = $.map(availableTags, function (tag) {
    if (tag.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
        return tag;
    }
});

Submit the form automatically

If you want to submit the form automatically when the selection is made:

select: function(event, ui) { 
    $("#search").val(ui.item.label);
    $("#searchForm").submit(); }

Complete code

The complete code is:
Html Form:

<form id="searchForm" action="#your_link" name="searchForm">
    <input id="search" name="search" type="text" />
    <button type="submit">Search</button>
</form>

Javascript:

$(function() {
    var tags = [
      "hello","hi", "halló", "bonjour", "bom dia", "buenos días"
    ];
    // Filter function to search only from the beginning of the string
    $( "#search" ).autocomplete({
        source: function (request, response) {
            var results = $.map(availableTags, function (tag) {
                if (tag.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
                    return tag;
                }
            });
            response(results.slice(0, limit));
        },
        // Submit the form automatically when the selection is made
        select: function(event, ui) { 
            $("#search").val(ui.item.label);
            $("#searchForm").submit(); }
    });
});

Raphaël has written 45 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>