jquery ui autocomplete in a nutshell

by Nibin George

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<form id='form1' enctype='multipart/form-data' action='simpanpage.php' method='post'>Label :
    <input type="text" name="label" id="label" />
    <input type="submit" value="save" />
    <input type="text" name="temp" id="temp" />
</form>

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"
    }];

    $("#label").autocomplete({
        source: countries_starting_with_A,
        minLength: 1,
        select: function (event, ui) {
            $("#temp").val(ui.item.value);
        },
        
    });

});