如何使用jquery ui自动完成功能使匹配的文本变为粗体？

使用jQuery UI自动完成功能使匹配文本变为粗体

基础概念

jQuery UI的自动完成(Autocomplete)是一个强大的小部件，它允许用户在输入框中输入时显示一个下拉建议列表。默认情况下，它会根据用户输入过滤建议项，但不突出显示匹配部分。

实现方法

要使匹配的文本变为粗体，我们需要自定义自动完成小部件的显示方式，具体步骤如下：

1. 基本实现代码

$(function() {
  $("#autocomplete").autocomplete({
    source: ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"],
    focus: function(event, ui) {
      // 防止默认行为，避免直接填充值
      event.preventDefault();
      $(this).val(ui.item.value);
    },
    select: function(event, ui) {
      // 选择项目时的处理
      $(this).val(ui.item.value);
      return false;
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    // 自定义渲染函数
    var re = new RegExp("(" + $.ui.autocomplete.escapeRegex(this.term) + ")", "gi");
    var highlighted = item.label.replace(re, "<strong>$1</strong>");
    return $("<li>")
      .append("<div>" + highlighted + "</div>")
      .appendTo(ul);
  };
});

2. 详细解释

source: 定义自动完成的数据源，可以是数组、URL或回调函数
_renderItem: 覆盖默认的渲染方法，自定义每个建议项的显示方式
正则表达式匹配: 使用输入的关键词(this.term)创建正则表达式，匹配文本中的相应部分
HTML格式化: 将匹配部分用<strong>标签包裹，使其显示为粗体

3. 完整HTML示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete with Bold Matches</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    .ui-autocomplete {
      max-height: 200px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  </style>
</head>
<body>
  <div class="ui-widget">
    <label for="autocomplete">Search: </label>
    <input id="autocomplete">
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#autocomplete").autocomplete({
        source: ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"],
        minLength: 1,
        focus: function(event, ui) {
          event.preventDefault();
          $(this).val(ui.item.value);
        },
        select: function(event, ui) {
          $(this).val(ui.item.value);
          return false;
        }
      }).autocomplete("instance")._renderItem = function(ul, item) {
        var re = new RegExp("(" + $.ui.autocomplete.escapeRegex(this.term) + ")", "gi");
        var highlighted = item.label.replace(re, "<strong>$1</strong>");
        return $("<li>")
          .append("<div>" + highlighted + "</div>")
          .appendTo(ul);
      };
    });
  </script>
</body>
</html>