如何自定义自动完成插件中的结果显示格式？

在自动完成插件中自定义结果显示格式

jQuery UI 自动完成插件提供了一种强大的方法来处理用户输入并建议相关选项。默认情况下，下拉结果显示建议项目中用户输入的匹配项。但是，您可能需要更自定义的格式，例如突出显示显示结果中的搜索字符。

猴子修补插件

要实现此目的，您可以采用称为“猴子修补”的技术，您可以在库中重新定义内部函数。在这种情况下，您需要重写负责创建下拉列表中每个项目的 _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;color:Blue;'>" + this.term + "</span>");
  return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + t + "</a>" )
    .appendTo( ul );
};

此函数使用正则表达式来隔离匹配的字符，并将它们包装在具有特定样式的 HTML span 元素中。 span 元素使用粗体和蓝色突出显示匹配项。

应用补丁

创建自定义函数后，您可以将其应用到通过在文档就绪事件中调用以下函数来自动完成小部件：

monkeyPatchAutocomplete();

此函数将用您的自定义版本替换默认的 _renderItem 函数。

保留字符大小写

请注意，上面的代码突出显示匹配项，但不保留原始输入的大小写。要保留大小写，请修改 _renderItem 函数中的替换行，如下所示：

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

定向修补

上述更改会影响页面上的所有自动完成小部件。如果您只想自定义特定实例，请参阅问题“如何在页面上修补仅一个自动完成实例？”

以上是如何自定义自动完成插件中的结果显示格式？的详细内容。更多信息请关注PHP中文网其他相关文章！