Question

I’m making a “token input” style checkbox with an autocomplete (user types in something, selects a response, which adds a “token” to the DOM view).

Using jQuery autocomplete, is there a way to add values that aren’t in the source list after the user types them in?

For example, a source looks like ["Apples", "Oranges", "Bananas"]. The user types in "plums," when using the text field. Is there a way to add “Plums” to the list of sources if the user so desires? I know there are select and change events that I can check, but select only works if there’s something to select (there isn’t in this case), and change would require some kind of timeout check to verify that the user had stopped typing.

Conversely, is there another plugin I could use to accomplish this behavior?

Answer 1

This should work fine with autocomplete‘s change event. This code assumes there’s a button with id add that appears when you want to add a new item to the list. It will not appear if the user selects an item from the list. There are some tweaks that can be made, but this proof of concept should make it possible:

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

$(function () {
    $("#auto").autocomplete({
        source: function (request, response) {
            response($.ui.autocomplete.filter(source, request.term));
        },
        change: function (event, ui) {
            $("#add").toggle(!ui.item);
        }
    });

    $("#add").on("click", function () {
        source.push($("#auto").val());
        $(this).hide();
    });
});

Here’s an example: http://jsfiddle.net/rmGqB/

---

Update: Sounds like I slightly misunderstood the requirement. You can also tap into the result that autocomplete would populate the candidate list with and drive the visibility of the button based on whether or not the results of the search yielded any exact matches:

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();
    });
});

Example: http://jsfiddle.net/VLLuJ/