如何禁用jQuery自动完成列表中的元素
是否可以禁用自动完成中的列表元素，使其不可选择（并灰显） 我有以下代码，取自jQuery UI示例页面： HTML: 例如，如果列表中的项目超过3个，是否可以禁用最后一个元素 在我的实际代码中，我有一个AJAX请求，但我不想在“自动完成”框中显示超过20个结果，因此如果结果不止这些，它应该显示类似“请缩小搜索范围”的内容，并禁用最后一个元素，因此它是不可选择的（但只应禁用最后一个元素）如何禁用jQuery自动完成列表中的元素,jquery,jquery-ui,Jquery,Jquery Ui,是否可以禁用自动完成中的列表元素，使其不可选择（并灰显） 我有以下代码，取自jQuery UI示例页面： HTML: 例如，如果列表中的项目超过3个，是否可以禁用最后一个元素 在我的实际代码中，我有一个AJAX请求，但我不想在“自动完成”框中显示超过20个结果，因此如果结果不止这些，它应该显示类似“请缩小搜索范围”的内容，并禁用最后一个元素，因此它是不可选择的（但只应禁用最后一个元素） 上面的代码是一个提琴演示，通过一些技巧，您可以做一些事情： JS $( "#tags" ).autocompl
上面的代码是一个提琴演示，通过一些技巧，您可以做一些事情： JS
$( "#tags" ).autocomplete({
source: availableTags,
focus:function(e){e.stopPropagation();return false;},
select:function(e){e.stopPropagation();return false;}
});
.ui-autocomplete .ui-state-focus{
border:0 !important;
background:0 !important;
}
$( "#tags" ).autocomplete({
source: availableTags,
focus:function(e){e.stopPropagation();return false;},
select:function(e){e.stopPropagation();return false;}
});
.ui-autocomplete .ui-state-focus{
border:0 !important;
background:0 !important;
}
$( "#tags" ).autocomplete({
source: availableTags,
focus:function(e, ui){
//if focusing on the extra elements return false thus doing nothing
return ui.item.idx<=2;
},
select:function(e, ui){
//if selecting on the extra elements return false thus doing nothing
return ui.item.idx<=2;}
}) .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
//small trick to get the current element index while the list is constructing, we set this as a helper for later usage inside the item.
item.idx=ul[0].childElementCount;
return $( "<li>" )
//if index is greater than 2 then we add a custom 'disable' class. this will help formating the disabled elements
.toggleClass('disable',ul[0].childElementCount>2)
//appending the element
.append( "<a>" + item.label + "</a>" ).appendTo( ul );
};
$（“#标记”）。自动完成({
资料来源：availableTags，
重点：功能（e、ui）{
//如果专注于额外的元素，则返回false，因此不做任何事情
返回ui.item.idx2）
//附加元素
.append（“如果我理解正确，您希望添加一个禁用的选项，并显示消息，说明当结果大于X时缩小搜索范围，为此，您需要自定义响应
和渲染方法：
$(function () {
$("#tags").autocomplete({
source: availableTags,
response: function (event, ui) {
//Check if we have more than 3 results
if (ui.content.length > 3) {
//Remove all elements until there are only 3 remaining (the use of slice() was not supported)
while (ui.content.length > 3) {
ui.content.pop();
}
//Add message
ui.content.push({
'label': 'Please narrow down your search',
'value': ''
});
}
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
//Add the .ui-state-disabled class and don't wrap in <a> if value is empty
if(item.value ==''){
return $('<li class="ui-state-disabled">'+item.label+'</li>').appendTo(ul);
}else{
return $("<li>")
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
};
});
$（函数（）{
$（“#标记”）.autocomplete({
资料来源：availableTags，
响应：功能（事件、用户界面）{
//检查我们是否有3个以上的结果
如果（ui.content.length>3）{
//删除所有元素，直到只剩下3个（不支持使用slice（））
而（ui.content.length>3）{
ui.content.pop（）；
}
//添加消息
ui.content.push({
“标签”：“请缩小搜索范围”，
“值”：”
});
}
}
}).data（“ui自动完成”）。\u renderItem=功能（ul，项目）{
//添加.ui state disabled类，不要换行以了解有关响应方法的更多信息，\u renderItem
函数没有文档记录，但我在其中一个示例的源代码中找到了它。箭头键也应该被解析。禁用的项应该被跳过。禁用的项在源代码中由属性标记。可以由c完成挂起活动项并设置相应类别：
$( "#tags" ).autocomplete({
source: [
{value: "ActionScript", disabled: false},
{value: "AppleScript", disabled: true},
{value: "Asp", disabled: false},
{value: "BASIC", disabled: true},
{value: "Erlang", disabled: false},
{value: "Fortran", disabled: true}
],
create: function () {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
let value = item.value;
let listItem;
if (item.disabled) {
listItem = $('<li class="ui-state-disabled"><div>' + value + '</div></li>')
.appendTo(ul);
} else {
listItem = $("<li>")
.append('<div>' + value + '</div>')
.appendTo(ul);
}
return listItem;
}
},
select: function (event, ui) {
if (ui.item.disabled) {
// suppress disabled items
event.preventDefault();
}
return false;
},
focus: function (event, ui) {
if (ui.item.disabled) {
//
// skip disabled items
//
let data = $(this).data('ui-autocomplete');
$(data.menu.active).find('div.ui-state-active').removeClass('ui-state-active'); // remove active class
if (event.originalEvent.key === 'ArrowDown') {
let liBefore = $(data.menu.active).prev(); // li before key pressing
let nextLi = data.menu.active;
if (!$(nextLi).is(':last-child')) {
while ($(nextLi).hasClass('ui-state-disabled')) {
// search first not disabled item
nextLi = $(nextLi).next();
}
if (nextLi.length === 0) {
// not found
nextLi = liBefore;
}
} else {
// last item
nextLi = liBefore;
}
// setting of active item in jquery-ui autocomplete
data.menu.active = nextLi;
$(nextLi).find('div').addClass('ui-state-active');
} else {
if (event.originalEvent.key === 'ArrowUp') {
let liBefore = $(data.menu.active).next(); // li before key pressing
let prevLi = data.menu.active;
if (!$(prevLi).is(':first-child')) {
while ($(prevLi).hasClass('ui-state-disabled')) {
// search first not disabled item
prevLi = $(prevLi).prev();
}
if (prevLi.length === 0) {
// not found
prevLi = liBefore;
}
} else {
// first item
prevLi = liBefore;
}
// setting of active item in jquery-ui autocomplete
data.menu.active = prevLi;
$(prevLi).find('div').addClass('ui-state-active');
}
}
}
return false;
}
});
$（“#标记”）。自动完成({
资料来源：[
{value:“ActionScript”，禁用：false}，
{值：“AppleScript”，禁用：true}，
{value:“Asp”，禁用：false}，
{value:“BASIC”，disabled:true}，
{value:“Erlang”，禁用：false}，
{值：“Fortran”，禁用：true}
],
创建：函数（）{
$（此）.data（'ui-autocomplete'）。\u renderItem=函数（ul，项）{
让值=item.value；
让列表项；
如果（项目已禁用）{
listItem=$（“”+value+” ）
.附录（ul）；
}否则{
listItem=$（“”）
.附加（“”+值+“”）
.附录（ul）；
}
返回列表项；
}
},
选择：功能（事件、用户界面）{
if（ui.item.disabled）{
//抑制禁用的项目
event.preventDefault（）；
}
返回false；
},
焦点：功能（事件、用户界面）{
if（ui.item.disabled）{
//
//跳过禁用的项目
//
让数据=$（this）.data（'ui-autocomplete'）；
$（data.menu.active）.find（'div.ui-state-active'）.removeClass（'ui-state-active'）；//删除活动类
如果（event.originalEvent.key=='ArrowDown'）{
让liBefore=$（data.menu.active）.prev（）；//li然后按键
让nextLi=data.menu.active；
if（！$（nextLi）.is（':last child'））{
while（$（nextLi）.hasClass（'ui-state-disabled'））{
//搜索第一个未禁用的项目
nextLi=$（nextLi.next（）；
}
如果（nextLi.length==0）{
//找不到
nextLi=liBefore；
}
}否则{
//最后一项
nextLi=liBefore；
}
//在jquery ui自动完成中设置活动项
data.menu.active=nextLi；
$（nextLi）.find（'div'）.addClass（'ui-state-active'）；
}否则{
如果（event.originalEvent.key=='ArrowUp'）{
让liBefore=$（data.menu.active）.next（）；//li然后按键
让prevLi=data.menu.active；
if（！$（prevLi）.is（':first child'））{
while（$（prevLi）.hasClass（'ui-state-disabled'））{
//搜索第一个未禁用的项目
prevLi=$（prevLi.prev（）；
}
if（prevLi.length==0）{
//找不到
prevLi=liBefore；
}
}否则{
//第一项
prevLi=liBefore；
}
//在jquery ui自动完成中设置活动项
data.menu.active=prevLi；
$（prevLi）.find（'div'）.addClass（'ui-state-active'）；
}
}
}
返回false；
}
});
您已经禁用了所有元素-如果列表中的元素超过3个，如何仅禁用最后一个元素？TecHunter-老实说，我更喜欢@koala_dev code，因为我认为它更有用
$( "#tags" ).autocomplete({
source: [
{value: "ActionScript", disabled: false},
{value: "AppleScript", disabled: true},
{value: "Asp", disabled: false},
{value: "BASIC", disabled: true},
{value: "Erlang", disabled: false},
{value: "Fortran", disabled: true}
],
create: function () {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
let value = item.value;
let listItem;
if (item.disabled) {
listItem = $('<li class="ui-state-disabled"><div>' + value + '</div></li>')
.appendTo(ul);
} else {
listItem = $("<li>")
.append('<div>' + value + '</div>')
.appendTo(ul);
}
return listItem;
}
},
select: function (event, ui) {
if (ui.item.disabled) {
// suppress disabled items
event.preventDefault();
}
return false;
},
focus: function (event, ui) {
if (ui.item.disabled) {
//
// skip disabled items
//
let data = $(this).data('ui-autocomplete');
$(data.menu.active).find('div.ui-state-active').removeClass('ui-state-active'); // remove active class
if (event.originalEvent.key === 'ArrowDown') {
let liBefore = $(data.menu.active).prev(); // li before key pressing
let nextLi = data.menu.active;
if (!$(nextLi).is(':last-child')) {
while ($(nextLi).hasClass('ui-state-disabled')) {
// search first not disabled item
nextLi = $(nextLi).next();
}
if (nextLi.length === 0) {
// not found
nextLi = liBefore;
}
} else {
// last item
nextLi = liBefore;
}
// setting of active item in jquery-ui autocomplete
data.menu.active = nextLi;
$(nextLi).find('div').addClass('ui-state-active');
} else {
if (event.originalEvent.key === 'ArrowUp') {
let liBefore = $(data.menu.active).next(); // li before key pressing
let prevLi = data.menu.active;
if (!$(prevLi).is(':first-child')) {
while ($(prevLi).hasClass('ui-state-disabled')) {
// search first not disabled item
prevLi = $(prevLi).prev();
}
if (prevLi.length === 0) {
// not found
prevLi = liBefore;
}
} else {
// first item
prevLi = liBefore;
}
// setting of active item in jquery-ui autocomplete
data.menu.active = prevLi;
$(prevLi).find('div').addClass('ui-state-active');
}
}
}
return false;
}
});