,可以通过设置自动完成的源数据来实现。源数据可以是一个数组,也可以是一个函数。当源数据是一个数组时,可以直接在数组中使用HTML标记。例如:
var data = [
"<strong>HTML</strong>",
"<em>CSS</em>",
"<u>JavaScript</u>"
];
$("#autocomplete").autocomplete({
source: data
});
在上面的例子中,自动完成的下拉列表中的每个选项都会显示为加粗、斜体或下划线的文本。
如果源数据是一个函数,可以在函数中返回包含HTML标记的字符串。例如:
var data = [
"HTML",
"CSS",
"JavaScript"
];
$("#autocomplete").autocomplete({
source: function(request, response) {
var term = request.term;
var results = [];
// 在源数据中查找匹配的项
for (var i = 0; i < data.length; i++) {
if (data[i].toLowerCase().indexOf(term.toLowerCase()) >= 0) {
// 使用HTML标记包装匹配的项
var html = "<strong>" + data[i] + "</strong>";
results.push(html);
}
}
response(results);
}
});
在上面的例子中,自动完成的下拉列表中的匹配项会被加粗显示。
总结起来,通过在自动完成的源数据中使用HTML标记,可以实现在jQuery UI自动完成中显示自定义的样式和格式。
领取专属 10元无门槛券
手把手带您无忧上云