如何在 jQuery UI 自动完成下拉列表中突出显示搜索词？

自定义自动完成插件结果

jQuery UI 自动完成插件提供了广泛的功能，但它可能并不总是满足您精确的格式要求。如果您需要在下拉结果中突出显示搜索字符序列，可以通过以下方式利用插件的灵活性：

猴子修补自动完成插件

The自定义结果的关键是替换生成下拉列表项的默认 _renderItem 函数。您可以通过一种称为“猴子修补”的技术来做到这一点。通过定义新的 _renderItem 函数，您可以以所需的格式渲染结果。

实现

以下代码示例提供了 _renderItem 函数的增强版本，用于格式化将字符序列与粗体文本匹配：

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
  var re = new RegExp("^" + this.term);
  var t = item.label.replace(re, "<span style='font-weight:bold'>$&</span>");
  return $( "<li></li>" )
    .data("item.autocomplete", item)
    .append( "<a>" + t + "</a>" )
    .appendTo(ul);
};

集成到您的代码中

在 $(document).ready(...) 块中调用 MonkeyPatchAutocomplete 函数一次即可启用自定义格式：

monkeyPatchAutocomplete();

限制

虽然此技术提供了基本功能，但它有一些限制：

• 它为每个项目创建一个单独的正则表达式对象，可以优化效率。
• 格式设置使用内联样式，这可能会影响同一页面上多个自动完成小部件之间的一致性。

保留大小写

要保持搜索字符的原始大小写而不是匹配键入的字符，请在代码中使用“$&”而不是“this.term”：

var t = item.label.replace(re, "<span style='font-weight:bold'>$&</span>");

以上是如何在 jQuery UI 自动完成下拉列表中突出显示搜索词？的详细内容。更多信息请关注PHP中文网其他相关文章！