jQueryUI 1.8.14 Autocomplete
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<div class="fvrduplicate">
<input type="text" id="auto" />
<span id="no-results"></span>
</div>
JavaScript
var buttonadd = '<span><button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button></span>';
var fvrhtmlclone = '<div class="fvrclonned">' + $(".fvrduplicate").html() + buttonadd + '</div>';
$(".fvrduplicate").html(fvrhtmlclone);
$(".fvrduplicate").after('<div class="fvrclone"></div>');
$(document).on('click', '.btn-add', function (e)
{
e.preventDefault();
$(".fvrclone").append(fvrhtmlclone);
$(this).removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function (e)
{
$(this).parents('.fvrclonned').remove();
e.preventDefault();
return false;
});
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#auto").autocomplete({
source: function (request, response) {
var results = $.ui.autocomplete.filter(availableTags, request.term);
if (!results.length) {
$("#no-results").text("No results found!");
} else {
$("#no-results").empty();
}
response(results);
}
});