Autocomplete Demo with a Local Array Source

This example uses a JavaScript array of label/value objects as the Autocomplete source. The label is shown to the user; the value can carry a database record ID or another internal identifier.

HTML Top ↑

<input type="text" id="t1">
<div id="d1"></div>

Local label/value Array Top ↑

const students = [
    {
        "label": "John Deo",
        "value": 1
    },
    {
        "label": "Max Ruin",
        "value": 2
    },
    {
        "label": "Arnold",
        "value": 3
    },
    {
        "label": "Krish Star",
        "value": 4
    },
    {
        "label": "John Mike",
        "value": 5
    },
    {
        "label": "Alex John",
        "value": 6
    },
    {
        "label": "My John Rob",
        "value": 7
    },
    {
        "label": "Asruid",
        "value": 8
    },
    {
        "label": "Tes Qry",
        "value": 9
    },
    {
        "label": "Big John",
        "value": 10
    },
    {
        "label": "Ronald",
        "value": 11
    },
    {
        "label": "Recky",
        "value": 12
    },
    {
        "label": "Kty",
        "value": 13
    },
    {
        "label": "Bigy",
        "value": 14
    },
    {
        "label": "Tade Row",
        "value": 15
    },
    {
        "label": "Gimmy",
        "value": 16
    },
    {
        "label": "Tumyu",
        "value": 17
    },
    {
        "label": "Honny",
        "value": 18
    },
    {
        "label": "Tinny",
        "value": 19
    },
    {
        "label": "Jackly",
        "value": 20
    },
    {
        "label": "Babby John",
        "value": 21
    },
    {
        "label": "Reggid",
        "value": 22
    },
    {
        "label": "Herod",
        "value": 23
    },
    {
        "label": "Tiddy Now",
        "value": 24
    },
    {
        "label": "Giff Tow",
        "value": 25
    },
    {
        "label": "Crelea",
        "value": 26
    },
    {
        "label": "Big Nose",
        "value": 27
    },
    {
        "label": "Rojj Base",
        "value": 28
    },
    {
        "label": "Tess Played",
        "value": 29
    },
    {
        "label": "Reppy Red",
        "value": 30
    },
    {
        "label": "Marry Toeey",
        "value": 31
    },
    {
        "label": "Binn Rott",
        "value": 32
    },
    {
        "label": "Kenn Rein",
        "value": 33
    },
    {
        "label": "Gain Toe",
        "value": 34
    },
    {
        "label": "Rows Noump",
        "value": 35
    }
];

Initialize Autocomplete Top ↑

$( "#t1" ).autocomplete({
    source: students,

    select: function ( event, ui ) {
        event.preventDefault();
        this.value = ui.item.label;

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

The selected label stays in the text box while the numeric value is sent to the detail endpoint.

← Autocomplete tutorial · Database source tutorial →

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: