Autocomplete select Event to Show Record Details

This example extends the database source demo. Suggestions come from the student table; when the user selects one, the visible input keeps the student's name and a second endpoint loads the record details.

Autocomplete with a select Event Top ↑

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

    select: function ( event, ui ) {
        event.preventDefault();

        this.value = ui.item.label;

        $( "#d1" ).load(
            "autocomplete-demo1-dtl-db.php",
            { id: ui.item.value }
        );

        return false;
    }
});

Why Use label and value Separately? Top ↑

• label is human-readable text shown in the suggestion menu and input.
• value carries the record ID used for the database detail request.

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: