Autocomplete with Images
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/black-tie/jquery-ui.css">
<input id="auto" type="text" />
CSS
img { width: 50px; height: 50px; padding-right: 10px;}
.ui-autocomplete > li { height: 60px; }
JavaScript
$(document).ready(function () {
$("#auto").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://mycorner.store:8080/api/assets/image/search/"+request.term,
success: function(data) {
response(data);
}
});
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li />")
.data("item.autocomplete", item)
.append(
"<a><img src='" + item.link + "' />" +
item.title.substring(0, 20) + "..." +
"</a>"
).appendTo(ul);
};
});