jQuery UI 1.8: autocomplete custom display

by Irvin Dominin

HTML

<div id="project-label">Select a project (type "j" for a start):</div>
<input id="project" />

<div id="count"></div>

JavaScript

$(function () {
    var projects = [{
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
    }, {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
    }, {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
    }];

    $("#project").autocomplete({
        minLength: 0,
        source: projects,
        response: function (event, ui) {
            var len = ui.content.length;
            $('#count').html('Founded ' + len + ' results');
        }
    });
});