jQuery UI: autocomplete in a dialog.

by A B

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<div id="myDialog" title="do something">
    <label for="project">projects: </label> 
    <input id="project" /> 
    <input type="hidden" id="project-id"/> 
    <p id="project-description"></p> 
</div>

<input type="button" id="openDialog"  value="Open Dialog" />

JavaScript

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

$("#myDialog").dialog({
    height: 200,
    width: 400,
    modal: true,
    autoOpen: false
});

$("#project").autocomplete({
    minLength: 0,
    source: projects,
    focus: function(event, ui) {
        $("#project").val(ui.item.label);
        return false;
    },
    select: function(event, ui) {
        $("#project").val(ui.item.label);
        $("#project-id").val(ui.item.value);
        $("#project-description").html(ui.item.desc);

        return false;
    }
}).data("autocomplete")._renderItem = function(ul, item) {
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
};

$('#openDialog').click(function() {
    $("#myDialog").dialog('open');
});