如何在 jQuery UI 自动完成结果中突出显示搜索词？

自定义自动完成插件结果

问：我可以在自动完成下拉结果中突出显示搜索词吗？

是的，您可以自定义自动完成插件结果的格式以突出显示搜索到的字符。

A: Monkey-Patching the Autocomplete Widget

为了实现这种效果，请利用猴子修补，这是一种重新定义库中的内部函数的技术。在 Autocomplete 小部件（jQuery UI 版本 1.8rc3）中，_renderItem 函数负责创建下拉结果。以下是重新定义它的方法：

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

B: 使用 "$& 保留大小写

要保留匹配字符串的大小写，请将 this.term 替换为 $ & 在替换函数中：

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

C：限制

此 hack 有以下限制：

• 一个新的 RegExp 对象为列表中渲染的每个项目创建。
• 没有使用 CSS 类进行格式化，因此同一页面上的多个自动完成将具有相同的样式。

D ：将更改应用于特定实例

如果您只需要修改一个自动完成实例，请参阅以下问题：如何在页面上修补仅一个自动完成实例？

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