jQuery Autocomplete .data("autocomplete") 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12274343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Autocomplete .data("autocomplete") is undefined
提问by Ben Pearce
When I try to implement auto-complete using the code below I get an error stating:
当我尝试使用下面的代码实现自动完成时，我收到一条错误消息：
.data("autocomplete") is undefined
How ever if I remove the .data() method from the end it works fine (just with out the customizable graphics that .data() provides). Can anyone tell me what's going wrong?
如果我从最后删除 .data() 方法它工作正常（只是没有 .data() 提供的可自定义图形）。谁能告诉我出了什么问题？
$("input#testInput").bind("autocompleteselect", function (event, ui) {
}).autocomplete({
appendTo: "#autoCompList",
source: function (request, response) {
$.ajax({
url: JSONP CALL URL
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function (data) {
response($.map(data.data, function (item) {
fbPageJson = item;
return {
label: item.name,
image: item.picture,
json: item,
}
}));
},
});
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label).appendTo(ul);
};
回答by Cagatay Kalan
I had the same problem and based on the 1.10.0 version of jquery ui, I think you should try
我有同样的问题，基于 1.10.0 版本的 jquery ui，我想你应该试试
data('uiAutocomplete')
instead of
代替
data('autocomplete')
Based on Johnny's comment, I checked how the .data() function works. Yes, jQuery returns null from .data() call when selector does not find any items.
根据约翰尼的评论，我检查了 .data() 函数是如何工作的。Yes, jQuery returns null from .data() call when selector does not find any items.
So if there is no matching element for your selector, then no autocomplete object is created and added to the custom data object.
因此，如果您的选择器没有匹配的元素，则不会创建自动完成对象并将其添加到自定义数据对象中。
So it seems it is better to do this:
因此，这样做似乎更好：
$(selector).autocomplete({ your autocomplete config props here });
if ( $(selector).data() ) {
// some jQueryUI versions may use different keys for the object. so to make sure,
// put a breakpoint on the following line and add a watch for $(selector).data().
// then you can find out what key is used by your jQueryUI script.
var ac = $(selector).data('uiAutocomplete');
if ( ac ) {
// do what you want with the autoComplete object. below is the changed version of an example from jqueryUI autocomplete tutorial
ac._renderItem = function(ul, item) {
return $("<li>")
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
}
}
回答by maladev
data('ui-Autocomplete')resolved my troubles. I think it's from jquery 1.7with jquery-ui 1.8. data('autocomplete')was ok. The same script with a recent version of these files doesn't work.
data('ui-Autocomplete')解决了我的烦恼。我认为它来自jquery 1.7与jquery-ui 1.8. data('autocomplete')没关系。与这些文件的最新版本相同的脚本不起作用。
回答by Paladini
I found the solution!
我找到了解决方案！
Somepeople think that "ui-autocomplete" is wrong, so they use "autocomplete" or "uiAutocomplete", but that is wrong. Actually, "ui-autocomplete" is the right way to do this.
有些人认为“ui-autocomplete”是错误的，所以他们使用“autocomplete”或“uiAutocomplete”，但这是错误的。实际上，“ui-autocomplete”是执行此操作的正确方法。
I have the same issue you have, and I find with a friend the problem of this code. Instead:
我和你有同样的问题，我和朋友一起发现了这段代码的问题。反而：
.data('ui-autocomplete')._renderItem = function (ul, item) {
if (!_.include(self.idArr, item.id)) {
return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
}
};
Use:
用：
._renderItem = function (ul, item) {
if (!_.include(self.idArr, item.id)) {
return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
}
};
I think combobox and autocomplete returns a data('ui-autocomplete'), so if you type .data('ui-autocomplete') you're doing something like:
我认为组合框和自动完成返回一个数据（'ui-autocomplete'），所以如果你输入 .data('ui-autocomplete') 你正在做这样的事情：
.data('ui-autocomplete').data('ui-autocomplete')
What's wrong....well, actually I don't know why this don't work and why without this works, but trust me, delete .data('ui-autocomplete') and be happy!
出什么问题了......好吧，实际上我不知道为什么这不起作用，为什么没有这个工作，但相信我，删除 .data('ui-autocomplete') 并高兴！
回答by The Alpha
Actually in your success function you are calling responseand returning an object like
实际上，在您的成功函数中，您正在调用response并返回一个对象，例如
return {
label: item.name,
image: item.picture,
json: item,
}
but in the following line
但在下一行
return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label + " Number of Likes: " + item.likes).appendTo(ul);
you are using item.likesthat is not available in your returned object, so it's the problem. I think you can use it like
您正在使用的item.likes在返回的对象中不可用，所以这是问题所在。我想你可以像这样使用它
success:function(data) {
var result = $.map(data, function (item){
return {
label: item.name,
image: item.picture,
item.likes
};
});
response(result);
}
Also keep the item.labelinside the <a></a>(it may not a cause for the error), like
还要保持item.label内部<a></a>（它可能不是错误的原因），例如
return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/>"+item.label+"</a>").appendTo(ul);
and make sure in the following line
并确保在以下行
$.map(data.data, function (item) // notice data.data
whether it should be data.dataor only data. You can also remove the json: itemfrom the object because you didn't use it anywhere, as far as I'm concerned.
无论是应该data.data还是只是data。就json: item我而言，您还可以从对象中删除 ，因为您没有在任何地方使用它。
Update:Change following line
更新：更改以下行
.data("autocomplete")._renderItem = function (ul, item) {...};
to
到
.data("autocomplete")?._renderItem = function (ul, item) {...}; // notice the ? mark
or
或者
if(typeof $('#Your_Input_Id').val()!="undefined")
{
$('#Your_Input_Id').autocomplete({....});
}
or
或者
var mydata=$('#Your_Input_Id').autocomplete(...).data('autocomplete');
if(mydata)
mydata._renderItem = function (ul, item) {...};
回答by Johnny
If you look at the latest example of combobox on the site demo, you will see they use data('ui-Autocomplete'). I ran into the same problem as you. I was previously using jquery-1.6.2 and jquery-ui-1.8.16. Once I updated my files to jquery-1.9.1 and jquery-ui-1.10.0 the error was fixed. I assume the older jquery-ui autocomplete was not setting the data('ui-Autocomplete') property, therefore it was null/undefined when retrieved. I hope this helps other people since you probably already fixed the issue.
如果您查看站点演示中组合框的最新示例，您将看到它们使用 data('ui-Autocomplete')。我遇到了和你一样的问题。我以前使用过 jquery-1.6.2 和 jquery-ui-1.8.16。一旦我将我的文件更新为 jquery-1.9.1 和 jquery-ui-1.10.0，错误就被修复了。我假设较旧的 jquery-ui 自动完成没有设置 data('ui-Autocomplete') 属性，因此检索时它为空/未定义。我希望这对其他人有所帮助，因为您可能已经解决了这个问题。
回答by Pratik Joshi
You can implement the below mentioned line
您可以实现下面提到的行
.autocomplete( "instance" )._renderItem = function( ul, item ) {
.autocomplete("instance")._renderItem = function( ul, item ) {
instate of
在状态
.data("autocomplete")._renderItem = function (ul, item) {
.data("autocomplete")._renderItem = function (ul, item) {
as per the documentation available at Jquery site Jquery AutoComplete Documentation and exampleyou will find this code.
根据 Jquery 站点Jquery AutoComplete 文档和示例中提供的文档，您将找到此代码。
from upgraded version of jquery 1.10 they have made change in code. hope this will help you.
从 jquery 1.10 的升级版本开始，他们对代码进行了更改。希望这会帮助你。
