jquery-ui-lookup; custom data - AUTOCOMPLETE in DIALOG

A lookup widget based on the dialog and autocomplete widgets from jQuery UI.

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="https://raw.github.com/sibartlett/jquery-ui-lookup/1.0.0/jquery.ui-lookup.js"></script>
<h1>jQuery UI Lookup</h1>
<p>A lookup widget based on the dialog and autocomplete widgets from jQuery UI.</p>
<a href="https://github.com/SimonBartlett/jquery-ui-lookup">GitHub Project Home</a>
<br /><br />
<h2>Custom data Demo</h2>
<div id="project-label">Select a project:</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/>
<input id="project"/>
<input type="hidden" id="project-id"/>
<p id="project-description"></p>

CSS

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
}
#project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
}
#project-icon {
    float: left;
    height: 32px;
    width: 32px;
}
#project-description {
    margin: 0;
    padding: 0;
}

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").lookup({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            return false;
        },
        select: function(item) {
            $( "#project" ).val( item.label );
            $( "#project-id" ).val( item.value );
            $( "#project-description" ).html( item.desc );
            $( "#project-icon" ).attr( "src", "https://github.com/jquery/jquery-ui/raw/master/demos/autocomplete/images/" + item.icon );

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