jquery ui autocomplete in a nutshell

by Dipak1991

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<label for="field_id">ID</label>
<input id="field_id" type="text" style="width: 40px;">
<label for="field">Countries (starting with A)</label>
<input id="field" type="text" style="width: 200px;">&nbsp;&nbsp;&nbsp;
<span id="results_count"></span>

<br>
<br>
<input type="button" value="OK">

JavaScript

$(function () {

    var countries_starting_with_A = [{
        "id": "1",
            "value": "Afghanistan",
            "label": "Afghanistan"
    }, {
        "id": "17",
            "value": "Albania",
            "label": "Albania"
    }, {
        "id": "18",
            "value": "Algeria",
            "label": "Algeria"
    }, {
        "id": "20",
            "value": "American Samoa",
            "label": "American Samoa"
    }, {
        "id": "22",
            "value": "Andorra",
            "label": "Andorra"
    }, {
        "id": "10",
            "value": "Angola",
            "label": "Angola"
    }, {
        "id": "11",
            "value": "Anguilla",
            "label": "Anguilla"
    }, {
        "id": "23",
            "value": "Antarctica",
            "label": "Antarctica"
    }, {
        "id": "24",
            "value": "Antigua and Barbuda",
            "label": "Antigua and Barbuda"
    }, {
        "id": "25",
            "value": "Argentina",
            "label": "Argentina"
    }, {
        "id": "26",
            "value": "Armenia",
            "label": "Armenia"
    }, {
        "id": "27",
            "value": "Aruba",
            "label": "Aruba"
    }, {
        "id": "28",
            "value": "Australia",
            "label": "Australia"
    }, {
        "id": "29",
            "value": "Austria",
            "label": "Austria"
    }, {
        "id": "12",
            "value": "Azerbaijan",
            "label": "Azerbaijan"
    }];

    $("#field").autocomplete({
        source: countries_starting_with_A,
        minLength: 1,
        select: function (event, ui) {
            // feed hidden id field
            $("#field_id").val(ui.item.id);
            // update number of returned rows
            $('#results_count').html('');
        }
       
    });

    // mustMatch (no value) implementation
    $("#field").focus(function () {
        $("#field").autocomplete("search", 'A');
    });
});