autocomplete w images
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css">
<section id="typeahead">
<div class="page-header">
<h1>Typeahead <small>Using JQuery UI</small></h1>
</div>
<h2>Demo</h2>
<div class="ui-widget" style="background-color: #f5f5f5;">
<label for="tags">Tags: </label>
<input id="my_ac">
</div>
<p>Here there be dragons</p>
<h2>Sample output</h2>
<div class="list_item_container">
<div class="image"><img src="http://placehold.it/80x80&text=BAD"></div>
<div class="label">Tom hanks</div>
<div class="description">Actor</div>
</div>
</section>
CSS
#my_ac {
width: 400px;
}
.ui-autocomplete.ui-menu
{
color: green;
background-color: white;
}
div.list_item_container {
height: 90px;
padding: 20px;
}
div.image {
width: 80px;
height: 50px;
float: left;
}
div.description {
font-style: italic;
font-size: 0.8em;
color: yellow;
}
JavaScript
$(function() {
$("#my_ac").autocomplete({
source: [
{
value: "Tom Hanks",
label: "Tom Hanks",
description: "Actor",
image: "http://placehold.it/80x80&text=hanks"
},
{
value: "Terminator 2",
label: "Terminator 2",
description: "Movie",
image: "http://placehold.it/80x80&text=term"
}
],
minLength: 1
}).data( "autocomplete" )._renderItem = function( ul, item ) {
var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.image + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.description + '</div></div></a>';
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append(inner_html)
.appendTo( ul );
};
});