jQuery自动完成下拉列表中的粗体搜索文本字符？

Question

如果您在https://jsfiddle.net/mgjftrdz/（代码来自http://jqueryui.com/autocomplete/#multiple）中输入“che”，它会列出两项：

• 奶酪
• 奶油奶酪

我需要对此进行哪些更改才能使这些特定字符在这样的下拉结果中变为粗体？

• 奶酪ese

• 奶油-cheese

  function split(val) {
      return val.split(/,\s*/);
  }
  
  function extractLast(term) {
      return split(term).pop();
  }
  
  $("#tags")
      // don't navigate away from the field on tab when selecting an item
      .bind("keydown", function(event) {
          if (event.keyCode === $.ui.keyCode.TAB &&
              $(this).autocomplete("instance").menu.active) {
              event.preventDefault();
          }
      })
      .autocomplete({
          minLength: 0,
          source: function(request, response) {
              // delegate back to autocomplete, but extract the last term
              response($.ui.autocomplete.filter(
                  availableTags, extractLast(request.term)));
          },
          focus: function() {
              // prevent value inserted on focus
              return false;
          },
          select: function(event, ui) {
              var terms = split(this.value);
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push(ui.item.value);
              // add placeholder to get the comma-and-space at the end
              terms.push("");
              this.value = terms.join(", ");
              return false;
          }
  
      });
  });
  

Answer 1

你可以试试

$(function() {
  var availableTags = [{
    label: 'honey',
    value: 1
  }, {
    label: 'apples',
    value: 2
  }, {
    label: 'milk',
    value: 3
  }, {
    label: 'tea',
    value: 4
  }, {
    label: 'oranges',
    value: 5
  }, {
    label: 'bread',
    value: 6
  }, {
    label: 'cheese',
    value: 7
  }, {
    label: 'apple-sauce',
    value: 8
  }, {
    label: 'cream-cheese',
    value: 9
  }];

  function split(val) {
    return val.split(/,\s*/);
  }

  function extractLast(term) {
    return split(term).pop();
  }

  $("#tags")
    // don't navigate away from the field on tab when selecting an item
    .bind("keydown", function(event) {
      if (event.keyCode === $.ui.keyCode.TAB &&
        $(this).autocomplete("instance").menu.active) {
        event.preventDefault();
      }
    })
    .autocomplete({
      minLength: 0,
      source: function(request, response) {
        // delegate back to autocomplete, but extract the last term
        var list = $.ui.autocomplete.filter(availableTags, extractLast(request.term));
        if (request.term) {
          var regex = new RegExp('(' + $.ui.autocomplete.escapeRegex(request.term) + ')', "gi");
          list = list.map(function(item) {
            return {
              label: item.label.replace(regex, '<b>$1</b>'),
              value: item.value
            }
          })
        }
        response(list);
      },
      focus: function() {
        // prevent value inserted on focus
        return false;
      },
      select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join(", ");
        return false;
      }
    });
  $("#tags").data('uiAutocomplete')._renderItem = function(ul, item) {
    return $("<li>").append(item.label).appendTo(ul);
  };
});

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div>
  <label for="tags">Snack foods:</label>
  <input id="tags" size="50">
</div>

Answer 2

刚刚使用了一个创建选项来准备需要渲染的 HTML。

下面是这段代码。虽然我知道这不是优化的，但你可以自己做。但我认为这是你需要的。

这里正在运行 JSFiddle https://jsfiddle.net/mgjftrdz/2/

create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
            var startIndex = item.label.indexOf($("#tags" ).val())
            var endIndex = startIndex + $("#tags" ).val().length;
              var totalLength = $("#tags" ).val();
              var arr = item.label.split('');
              var newLabel="<label>";
              for(var i=0 ; i < arr.length; i++){
                newLabel+= (i>= startIndex && i <= endIndex) ? "<b>"+arr[i]+"</b>": arr[i];
              }
              newLabel += "</label>"

                return $('<li>')
                    .append('<a>' + newLabel + '</a>')
                    .appendTo(ul);
            };
        },