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!
精彩评论