JSFiddle - React, Tailwind, and code Playground
HTML
<div id="project-label">Select a project (type "j" for a start):</div>
<input id="project" />
<input type="hidden" id="project-id" />
<p id="project-title"></p><p id="project-description"></p><p id="project-other"></p>
CSS
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-description {
margin: 0;
padding: 0;
}
JavaScript
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
other: "9834275 9847598023 753425828975340 82974598823"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
other: "98 83475 9358 949078 8 40287089754 345 2345"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
other: "49857 2389442 573489057 89024375 928037890"
}
];
$( "#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 ); // is this needed?
$( "#project-title" ).html( ui.item.label );
$( "#project-description" ).html( ui.item.desc );
$( "#project-other" ).html( ui.item.other );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label +
"<br><span style='font-size: 80%;'>Desc: " + item.desc + "</span>" +
"<br><span style='font-size: 60%;'>Other: " + item.other + "</span></a>" )
.appendTo( ul );
};
});