JQuery autocomplete If the item is not found, display "Press Enter to paste into autocomplete"?

Question

I am pretending to compile tag-autocomplete.

Basically, when a user types in a query that doesn’t have autocomplete options like “aaa”, I want the autocomplete to drop and display “Press 'Enter' to create a tag for" aaa. "

I can’t find anything in the documents (I suppose this requires me to be hacked, but before I do this, I want to see if anyone made a patch for this.)

EDIT:

I started 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" ); } }; 

It works great. However, when the user presses "Press Enter for this tag," the tag "Press enter to create this tag" is created. How to fix this in the original query?

Answer 1

I don’t know how you get autocomplete results, but if, for example, you get it in a call to $ .getJSON () and fill out combo elements based on the result (and not just provide the result of a direct control call), you can check if whether result.length == 0, and if so, add something else (for example, an element saying "Press Enter to create") in the combo.

Please show the code if you want a more accurate answer!

Answer 2

My solution is partially derived from the request logic. I post my solution here, hope this helps someone. Basically we make a request for a term, and if this term does not exist, we allow the user to click on a fake result (click here to add). In doing so, they trigger a request to add a term. After that, we clear the autocomplete with its initial status and add the newly created term in the div, which lists the selected terms. I also save the identifier, which will be saved after the user fills out 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); };