Adding values to jQuery autocomplete real time

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

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/

Answer 2

The answer provided by Andrew causes the ADD NEW button to remain, even if the user then selects an existing item from the array instead of adding "new" !!!

Instead of included a toggle on the 'add' button, there's a built in .change function within autocomplete which can be used.

Although "Change" waits until the text box loses focus, this can be a better interface to then show the ADD BUTTON if there isn't a match to the array. (or could create a "confirm" of adding).

See alternative code which actually hides the "Add Button" again if the user selects from the array. Something which Andrew Whitaker's solution doesn't do :

$(function () {

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

  $("#auto").autocomplete({
    source: function (request, response) {
        var result = $.ui.autocomplete.filter(source, request.term);


        response(result);
    },
    change: function( event, ui ) {
      var $label = $(this);
      // figure out the id of hidden input box from label id
      var $id = $('#'+this.id.replace('label_','id_'));
      if ( ui.item === null && $label.val() != '' ){
        $("#add").show();            
      }
        if( ui.item != null && $label.val() != '' ){
        $("#add").hide();            
      }
    }
  });

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

});

See my revised Fiddle in action - http://jsfiddle.net/VLLuJ/25/

Answer 3

Old question, but useful answer:

To update the autocomplete source, use the setter:

$("#auto").autocomplete("option", "source", ["Apples","Oranges","Bananas","Plums"]);

See http://api.jqueryui.com/autocomplete/#option-source