JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
JavaScript
var url='http://www.omdbapi.com/?type=movie&t=money';
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
$( "#tags" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "//www.omdbapi.com/",
dataType: "jsonp",
data: {
t: request.term,
type: 'movie'
},
success: function( data ) {
alert(JSON.stringify(data));
// Handle 'no match' indicated by [ "" ] response
response( data.length === 1 && data[ 0 ].length === 0 ? [] : data );
}
} );
},
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
} );