是否可以仅向自动完成下拉列表中返回的某些结果添加样式？
下面的代码工作正常，但是，我想根据data[x].restricted. 当它是时true，我仍然想显示这些项目，但在自动完成下拉列表中将它们禁用或变灰。如果data[x].restricted是，false那么我不想对这些项目应用任何额外的样式。
source: function (request, response) {
$.ajax({
url: $("#AutoCompleteCustomerNameUrl").val(),
type: "POST",
dataType: "json",
data: {
srchCus: request.term
},
success: function (data) {
var x, array = [];
for (x in data) {
array.push({
label: (data[x].restricted ? 'Restricted Access - ' : '') + data[x].customerName,
name: data[x].customerFullName
});
}
}
});
}
任何关于如何实现这一点的帮助将不胜感激。
感觉这不是一个很好的选择，但您可能可以通过使用 jQuery 根据文本定位元素来做到这一点content。自动完成建议是作为<li>s生成的，所以这样的事情可能会起作用：
$('li:contains("Restricted Access")').addClass('grey');
那么问题是什么时候运行呢？当然，这些元素是在页面加载后动态添加的，因此必须在创建后运行- 您必须根据某些自动完成事件运行它。查看文档中的列表，也许公开活动是最好的。每当打开菜单时，该事件的处理程序就会运行，因此它可以向所有刚创建的与该选择器匹配的建议添加一个 CSS 类。例如（未经测试）：
$("#selector").autocomplete({
// ... your normal autocomplete code ...
open: function(event, ui) {
// Add a CSS class to those suggestions matching the text
$('li:contains("Restricted Access")').addClass('grey');
}
});
我没有测试过这个，因为它感觉不是正确的方法。下面是一个更好的、经过测试和工作的选项。
您也可以使用_renderItem扩展点执行此操作。如果您检查他们在那里提供的示例，您可以看到它是实际生成 HTML 的函数，该函数显示为您的自动完成建议。如果我们可以自定义它，我们可以做任何事情 - 例如检查项目的详细信息，添加特定的 CSS 类等。
我觉得这些文档不是很清楚，但不难找到使用中的示例，例如自定义数据示例（@Simon-K 在上面的评论中链接到）显示了如何使用它：
$("#selector").autocomplete({
// ... your normal autocomplete code ...
}).autocomplete("instance")._renderItem = function(ul, item) {
// Here we have complete control of what is returned, and access to
// the items!
return $("<li>").append("<div>" + item.label ...).appendTo(ul);
};
因此，根据您的要求，我们可以执行以下操作：
$("#selector").autocomplete({
// ... your normal autocomplete code ...
}).autocomplete("instance")._renderItem = function(ul, item) {
var style = (item.restricted) ? 'grey' : '';
return $("<li>")
.append("<div class='" + style + "'>" + item.label + "</div>")
.appendTo(ul);
};
然后当然添加一个 CSS 类来设置这些项目的样式：
.grey {
color: #ccc;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句