JQuery Autocomplete. If item cannot be found, display "Press Enter to insert into autocomplete"?

I am doing kind of a tag-autocomplete comb开发者_开发知识库o.

So basically when user enters a query that has no autocomplete options, i.e "aaa", I want autocomplete to drop down and display "Press 'Enter' to create a tag for 'aaa'. "

I can't find anything on the docs (I suppose this requires me to do some hacking, but before doing so, I wanna see if anyone has done a patch for this.)

EDIT:

I have began working on the source code and this is what I have:

 $.ui.autocomplete.prototype._response= function( content ) {
    /* BUG: when the user clicks "Press Enter to this tag", 
     *  the tag "Press enter to create this tag" 
     *  gets created
     */
    console.log(content);
    if (content.length == 0) { 
      content = [{ 'label': "Press Enter to create this tag.", "value": -1 }];
    }

    if ( !this.options.disabled && content && content.length ) {
      content = this._normalize( content );
      this._suggest( content );
      this._trigger( "open" );
    } else {
      this.close();
    }
    this.pending--;
    if ( !this.pending ) {
      this.element.removeClass( "ui-autocomplete-loading" );
    }
  };

This works fine. However, when the when the user clicks "Press Enter to this tag", the tag "Press enter to create this tag" gets created. How do I fix this to the original query?

---

My solution is partially derived from the requester's logic. I'm posting my solution here, hopefully it helps someone. Basically we make a request for a term and if that term doesn't exist we'll allow the user to click on a fake result (click here to add). Upon doing so they trigger a request to add the term. After that happens we clear the autocomplete to it's initial status and append the newly created term to a div that lists the selected terms. I also store the id's to be saved after the user completes the form.

  $("#local-sponsor").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: applications.Urls.FindLocalSponsor,
                dataType: "json",
                cache: false,
                data: {
                    term: request.term,
                    alreadyselected: function () {
                        var ids = [];
                        $("#localsponsor-div div.tagButton").each(function () {
                            ids.push($(this).data("id"));
                        });
                        return ids;
                    }
                },
                success: function (data) {
                    if (data.length === 0) {
                        data = [{ 'label': "Click here to create", "value": request.term, "id": -1 }];
                    }
                    response(data);
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {
            if (ui.item.id === -1) {
                $.ajax({
                    url: applications.Urls.AddLocalSponsor,
                    type: 'POST',
                    dataType: "json",
                    cache: false,
                    data: {
                        term: ui.item.value
                    },
                    success: function (data) {
                        if (data.id !== 0) {
                            var upto = parseInt($("#upto-localsponsor").val());
                            var e = '<div class="tagButton" data-id="' + data.id + '">' + data.value + '<a class="remove remove-researcher-co"></a><input type="hidden" name="LocalSponsors[' + upto + ']" id="LocalSponsors' + upto + '_" value="' + data.id + '"/></div>';
                            $("#localsponsor-div").append(e);
                            $("#upto-localsponsor").val(upto + 1);
                        }
                    }
                });
                $(this).val(''); return false;
            } else {
                var upto = parseInt($("#upto-localsponsor").val());
                var e = '<div class="tagButton" data-id="' + ui.item.id + '">' + ui.item.label + '<a class="remove remove-researcher-co"></a><input type="hidden" name="LocalSponsors[' + upto + ']" id="LocalSponsors' + upto + '_" value="' + ui.item.id + '"/></div>';
                $("#localsponsor-div").append(e);
                $("#upto-localsponsor").val(upto + 1);
                $(this).val(''); return false;
            }
        },
        response: function(event, ui) {
        }
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
    };

---

I don't know how you get you're autocomplete results, but if for example you're getting it in a $.getJSON() call, and filling the combo's items based on the result (and not just giving the result of the call straight to the control) you could check whether the result.length == 0, and if so, add something else (like an element saying "Press Enter to create") to the combo.

Please show some code, if you want more precise answer!