所以我正在构建一个自定义的自动填充框,其中一个本地数据的数组如下所示是数据源：
{
label: "joe",category: "people"
}
我已经定制了rendermenu函数来启用菜单中的类别,如：
$.widget("custom.catcomplete",$.ui.autocomplete,{
_renderMenu: function(ul,items) {
var self = this,currentCategory = "";
$.each(items,function(index,item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
self._renderItem(ul,item);
});
}
});
我正在初始化一切都是通过以下方式完成的：
$("#search").catcomplete(getConfig(all));
其中getConfig是：
function getConfig(data) {
// autocomplete Box configuration for searchbars
return {
delay: 0,source: function (request,response) {
var prune = request.term,arr = prune.split(":");
if (arr.length > 2) {
response();
} else {
response($.ui.autocomplete.filter(data,arr[arr.length - 1]));
}
},select: function (e,ui) {
e.preventDefault();
addBit(ui.item);
e.originalEvent.stopPropagation();
},focus: function (e,ui) {
//console.log(e);
//e.preventDefault();
//console.log(ui);
//$('ul.autocomplete li#floatinput input#search').val(ui.item.category + ":" + ui.item.label);
},position: {
my: "left top",at: "left bottom",of: $("ul.autocomplete"),collision: "flip flip"
}
}
}
但是不知何故焦点事件没有定义项目.我试图摆脱焦点函数alltogether,只得到：未捕获TypeError：无法读取属性’值’未定义.这意味着事件的默认行为不起作用.
欢迎任何建议！
这是一个小提琴,我帮助说明> http://jsfiddle.net/ahTCW/3/
解决方法
使用_renderItemData而不是_renderItem与jQueryUI> = 1.9：
// getconfig
$.widget("custom.catcomplete",item) {
if (item.category != currentCategory) {
ul.append("<li style='clear:both'class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
self._renderItemData(ul,item);
});
}
});
发生另一个错误：
Uncaught TypeError: Cannot read property ‘nodeType’ of undefined
这是由你传递给position对象的属性的选项引起的.当自动完成小部件被实例化时,页面上不存在ul.autocomplete.
更新例：http://jsfiddle.net/kHNS5/