jQueryUI 1.8.14 Autocomplete

by Ea Bangalore

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">
<input type="text" id="auto" />
<button id="add" class="hidden">Item does not exist. Click here to add it.</button>

CSS

.hidden { display: none; }

JavaScript

var source = ["Apples", "Oranges", "Bananas"];

$(function () {
    $("#auto").autocomplete({
        source: function (request, response) {
            var result = $.ui.autocomplete.filter(source, request.term);
            
            $("#add").toggle($.inArray(request.term, result) < 0);
            
            response(result);
        }
    });
    
    $("#add").on("click", function () {
        source.push($("#auto").val());
        $(this).hide();
    });
});