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">
<div class="ui-widget">
<label for="tags">With Images and Multiple Selection: </label>
<input id="tags" size="50" />
</div>
CSS
img { width: 25px; height: 25px; padding-right: 10px;}
.ui-autocomplete > li { height: 40px; }
JavaScript
var myData = [
{
"id": "1",
"value": "Afghanistan",
"label": "Afghanistan"
},
{
"id": "17",
"value": "Albania",
"label": "Albania"
},
{
"id": "18",
"value": "Algeria",
"label": "Algeria"
},
{
"id": "20",
"value": "American Samoa",
"label": "American Samoa"
},
{
"id": "22",
"value": "Andorra",
"label": "Andorra"
},
{
"id": "10",
"value": "Angola",
"label": "Angola"
},
{
"id": "11",
"value": "Anguilla",
"label": "Anguilla"
},
{
"id": "23",
"value": "Antarctica",
"label": "Antarctica"
},
{
"id": "24",
"value": "Antigua and Barbuda",
"label": "Antigua and Barbuda"
},
{
"id": "25",
"value": "Argentina",
"label": "Argentina"
},
{
"id": "26",
"value": "Armenia",
"label": "Armenia"
},
{
"id": "27",
"value": "Aruba",
"label": "Aruba"
},
{
"id": "28",
"value": "Australia",
"label": "Australia"
},
{
"id": "29",
"value": "Austria",
"label": "Austria"
},
{
"id": "12",
"value": "Azerbaijan",
"label": "Azerbaijan"
}
];
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: myData,
focus: function() {
// prevent value inserted on...