我的Web应用程序中有一个工作的自动完成字段,我正在寻找一种方法来增加字段的可用性,当使用箭头键向下滚动可用选项时(在键入后)以某种方式自动跳过类别字段部分搜索词).
例如,如果用户开始键入“an”,则自动填充将显示两个类别,每个类别中包含项目.用户想要在“人物”下选择列表中的一个项目.他们使用箭头键向下移动列表.目前,此代码将结果中的类别作为列表项插入.使用箭头键时,必须移动它们才能突出显示并选择结果.应用程序可以自动跳过这些类别标题吗？
例如,如果用户开始键入“an”,则自动填充将显示两个类别,每个类别中包含项目.用户想要在“人物”下选择列表中的一个项目.他们使用箭头键向下移动列表.目前,此代码将结果中的类别作为列表项插入.使用箭头键时,必须移动它们才能突出显示并选择结果.应用程序可以自动跳过这些类别标题吗？
$.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-menu-item ui-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
self._renderItem( ul,item );
});
}
});
var data = [
{ label: "annk K12",category: "Products" },{ label: "annttop C13",{ label: "anders andeRSSon",category: "People" },{ label: "andreas andeRSSon",{ label: "andreas johnson",category: "People" }
];
$( "#textfield" ).catcomplete({
source: data,select: function(event,ui) {
window.location.hash = "id_"+escape(ui.item.id);
}
});
解决方法
这一行：
ul.append( "<li class='ui-menu-item ui-category'>" + item.category + "</li>" );
造成了这个问题.
Internally,小部件使用具有类ui-menu-item的列表项来区分li是否是可以选择的实际菜单项.当您按下“向下”键时,窗口小部件会找到带有类ui-menu-item的下一个项目并移动到该项目.
ul.append( "<li class='ui-category'>" + item.category + "</li>" );
这是工作：
