JSFiddle - React, Tailwind, and code Playground
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: 25px; height: 25px; padding-right: 10px;}
.ui-autocomplete > li { height: 40px; }
JavaScript
$(document).ready(function() {
$("#auto").autocomplete({
source: function(request, response) {
$.ajax({
url: "http://api.stackoverflow.com/1.1/users",
data: {
filter: request.term,
pagesize: 10
},
jsonp: "jsonp",
dataType: "jsonp",
success: function(data) {
$(this).data("searching", false);
response($.map(data.users, function(el, index) {
return {
value: el.display_name,
avatar: "http://www.gravatar.com/avatar/" + el.email_hash
};
}));
}
});
},
focus: function (event, ui) {
this.value = ui.item.value;
},
minLength: 0
}).bind("focus", function() {
console.log(this.value);
if (this.value === '') {
$(this).autocomplete("search", "");
}
});
});