jQuery UI Autocomplete

jQuery UI Autocomplete displays matching suggestions while a user types into an input. The source can be a local array, a URL that returns JSON, or a custom function that calls an API or database backend.

Basic Autocomplete Top ↑

<input id="auto_c">

$( function () {
    $( "#auto_c" ).autocomplete({
        source: [
            "PHP",
            "jQuery",
            "JavaScript",
            "HTML",
            "ASP",
            "MySQL",
            "Access",
            "Excel",
            ".NET"
        ]
    });
});

Demo: Autocomplete with an array source →

Demo: display database record details after selection →

Autocomplete Options Top ↑

appendTo

Choose the element that should contain the suggestion menu. This is useful when the input is inside a positioned dialog or another stacking context.

$( "#auto_c" ).autocomplete({
    appendTo: "#my_element"
});

Read the current value:

const appendElement =
    $( "#auto_c" ).autocomplete( "option", "appendTo" );

Set it later:

$( "#auto_c" ).autocomplete(
    "option",
    "appendTo",
    "#my_element"
);

autoFocus

When true, the first menu item receives focus automatically when the menu opens.

$( "#auto_c" ).autocomplete({
    autoFocus: true
});

Demo: autoFocus →

const autoFocus =
    $( "#auto_c" ).autocomplete( "option", "autoFocus" );

$( "#auto_c" ).autocomplete(
    "option",
    "autoFocus",
    true
);

classes

Add your own classes to jQuery UI structural classes.

$( "#auto_c" ).autocomplete({
    classes: {
        "ui-autocomplete": "ui-state-highlight"
    }
});

Demo: classes →

const menuClass =
    $( "#auto_c" ).autocomplete(
        "option",
        "classes.ui-autocomplete"
    );

$( "#auto_c" ).autocomplete(
    "option",
    "classes.ui-autocomplete",
    "my-autocomplete-menu"
);

delay

delay is the number of milliseconds Autocomplete waits after typing before starting a search. Smaller values feel responsive for local data; remote sources may use a slightly larger delay to reduce requests.

$( "#auto_c" ).autocomplete({
    delay: 200
});

Demo: delay →

const delay =
    $( "#auto_c" ).autocomplete( "option", "delay" );

$( "#auto_c" ).autocomplete( "option", "delay", 400 );

disabled

$( "#auto_c" ).autocomplete({
    disabled: true
});

Demo: disabled →

const disabled =
    $( "#auto_c" ).autocomplete( "option", "disabled" );

$( "#auto_c" ).autocomplete( "option", "disabled", false );

minLength

Require a minimum number of characters before a search starts. Higher values can reduce unnecessary database requests.

$( "#auto_c" ).autocomplete({
    minLength: 2
});

Demo: minLength →

const minLength =
    $( "#auto_c" ).autocomplete( "option", "minLength" );

$( "#auto_c" ).autocomplete( "option", "minLength", 3 );

position

Control where the menu appears relative to the input.

$( "#auto_c" ).autocomplete({
    position: {
        my: "left top",
        at: "right bottom"
    }
});

Demo: position →

const position =
    $( "#auto_c" ).autocomplete( "option", "position" );

$( "#auto_c" ).autocomplete(
    "option",
    "position",
    {
        my: "right top",
        at: "right bottom"
    }
);

const options =
    $( "#auto_c" ).autocomplete( "option" );

$( "#d2" ).text(
    "position my: " + options.position.my +
    ", position at: " + options.position.at
);

source

source is required. It can be an array, a URL string, or a function.

$( "#auto_c" ).autocomplete({
    source: [
        "PHP",
        "jQuery",
        "JavaScript",
        "HTML",
        "MySQL"
    ]
});

Demo: source →

A custom source function is the most flexible choice for database/API results:

$( "#auto_c" ).autocomplete({
    source: function ( request, response ) {
        $.getJSON(
            "autocomplete-demo1-dtl.php",
            { term: request.term }
        ).done( response );
    }
});

Autocomplete Methods Top ↑

close()

$( "#auto_c" ).autocomplete( "close" );

Demo: close() →

destroy()

$( "#auto_c" ).autocomplete( "destroy" );

Demo: destroy() →

disable()

Disable Autocomplete without destroying the widget.

$( "#auto_c" ).autocomplete( "disable" );
$( "#auto_c" ).autocomplete( "enable" );

Demo: disable() / enable() →

enable()

Re-enable an Autocomplete instance that was previously disabled.

$( "#auto_c" ).autocomplete( "enable" );

instance()

const autocompleteInstance =
    $( "#auto_c" ).autocomplete( "instance" );

option()

Read one option:

const minLength =
    $( "#auto_c" ).autocomplete( "option", "minLength" );

Demo: read option values →

Read the complete option object:

const options =
    $( "#auto_c" ).autocomplete( "option" );

Demo: read the option object →

search()

Trigger a search programmatically. Pass a string or omit the argument to search using the current input value.

$( "#auto_c" ).autocomplete(
    "search",
    "java"
);

Demo: search() with preset strings →

widget()

const menu =
    $( "#auto_c" ).autocomplete( "widget" );

Autocomplete Events Top ↑

change

Fires when the input loses focus and the value has changed.

$( "#auto_c" ).autocomplete({
    change: function ( event, ui ) {
        console.log( "Changed value:", this.value );
    }
});

Demo: change event →

close

$( "#auto_c" ).autocomplete({
    close: function ( event, ui ) {
        console.log( "Menu closed" );
    }
});

Demo: close event →

create

$( "#auto_c" ).autocomplete({
    create: function ( event, ui ) {
        console.log( "Autocomplete created" );
    }
});

Demo: create event →

focus

Fires when focus moves to a menu item without selecting it.

$( "#auto_c" ).autocomplete({
    focus: function ( event, ui ) {
        $( "#status" ).text(
            "Focused: " + ui.item.label
        );
    }
});

Demo: focus event →

open

$( "#auto_c" ).autocomplete({
    open: function ( event, ui ) {
        console.log( "Suggestion menu opened" );
    }
});

Demo: open event →

response

Fires after the source returns results, before the menu is displayed.

$( "#auto_c" ).autocomplete({
    response: function ( event, ui ) {
        $( "#status" ).text(
            ui.content.length + " suggestions returned"
        );
    }
});

Demo: response event →

search

Fires before a search begins. Returning false cancels the search.

$( "#auto_c" ).autocomplete({
    search: function ( event, ui ) {
        return this.value.trim().length >= 2;
    }
});

Demo: search event →

select

Fires when the user chooses a menu item. A common database pattern shows the label in the input while keeping the record ID in ui.item.value.

$( "#auto_c" ).autocomplete({
    select: function ( event, ui ) {
        event.preventDefault();

        this.value = ui.item.label;

        $( "#record_id" ).val(
            ui.item.value
        );
    }
});

Demo: select event →

Autocomplete Data Sources Top ↑

Download the existing Autocomplete example ZIP

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: