Question

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

干酪
奶油干酪

我需要做哪些更改才能使这些特定字符在下拉结果中变为粗体？

的车 ESE

洁面乳的枝 ESE

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

只是使用了一个create选项来准备需要渲染的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);
            };
        },

Answer 2

你可以尝试

＆＃13;

$(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);
  };
});

＆＃13;

<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>

＆＃13;

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

2 个答案: