Autocomplete with a Database Source

This live example retrieves matching student names from a PHP/PDO backend as the user types. The backend returns JSON objects containing a display label and record value.

Remote JSON Source Top ↑

$( "#t1" ).autocomplete({
    minLength: 1,

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

jQuery UI already sends the typed term to source callbacks through request.term.

Backend Response Shape Top ↑

[
    {
        "label": "Alex John",
        "value": 6
    },
    {
        "label": "John Deo",
        "value": 1
    }
]

After selection, the next example loads the complete record.

Show record details after Autocomplete selection →

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: