Question

我为客户端实现了jQuery Autocomplete。现在，他们希望我突出显示（例如，使粗体）结果中与他们键入的文本相匹配的部分。

e.g。用户输入“something”，结果如下：

某事 a

某事 b

另一个某事

执行某事其他

这个功能是否构建在jQuery自动完成中？如果是这样，它是什么？

或者这是我必须自己实施的东西吗？如果是这样，我从哪里开始呢？

Answer 1

此功能不是内置的，但您可以通过“猴子修补”自动完成小部件的_renderItem功能轻松完成此功能。看看这个问题，看看你想要的是什么：

jQueryUI: how can I custom-format the Autocomplete plug-in results?

Answer 2

我以前有相同的要求。

以下代码可能对您有用。

“您必须小心选择器”

<script>
  $("#input-search-box")
    .autocomplete({
      //your code
    })
    .data("autocomplete")._renderItem = function(ul, item) {
    var items = $("<li></li>").data("ui-autocomplete-item", item);
    //match and key variables highlight the user's typed input rendering in bold blue for dropdown items.
    var match = new RegExp("^" + this.term, "i"); //i makes the regex case insensitive

    //change initial typed characters of all item.label   replace is plain JS
    var key = item.label.replace(
      match,
      '<span class="required-drop">' + this.term + '</span>'
    );

    items.html("<a>" + key + "</a>").append(ul);
  }; 
</script>

让我知道您是否需要更多帮助来实现此代码。

如何突出显示与已键入的文本匹配的jQuery自动完成结果？

2 个答案: