jquery ui autocomplete in a nutshell

by Mike Cunneen

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<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: 150px;" class="deletable">&nbsp;&nbsp;&nbsp;
<span id="results_count"></span>

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

CSS

span.deleteicon {
        position: relative;
    }
    span.deleteicon span {
        position: absolute;
        display: block;
        top: 5px;
        right: 0px;
        width: 16px;
        height: 16px;
        background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
        cursor: pointer;
    }
    span.deleteicon input {
        padding-right: 16px;
    }

JavaScript

$(function () {

    $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function () {
        $(this).prev('input').val('').focus();
    }));

    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: 0,
        delay: 0,
        select: function (event, ui) {
            // feed hidden id field
            $("#field_id").val(ui.item.id);
            // update number of returned rows
            $('#results_count').html('');
        },
       ...