JSFiddle - React, Tailwind, and code Playground
HTML
<p>Type at least 3 characters in the input</p>
<form id="myForm" name="myForm" method="post">
<input id="addButton" type="button" value="Add an input" />
<input name="search" class="searchInput" maxlength="20" />
</form>
CSS
@import url("http://code.jquery.com/ui/1.8.14/themes/smoothness/jquery-ui.css");
JavaScript
$(function () {
var autocompleteOptions = {
minLength: 3,
source: function (request, response) {
$.ajax({
type: "POST",
url: "/echo/json/",
data: {
json: '["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]',
delay: 1
},
success: function (data) {
response(data);
}
});
}
};
function addInput() {
var $input = $("<input>", {
name: "search",
"class": "searchInput",
maxlength: "20"
});
$input.appendTo("form#myForm").focus().autocomplete(autocompleteOptions);
};
$("input.searchInput").autocomplete(autocompleteOptions);
$("input#addButton").click(addInput);
});