jQuery Autocomplete下拉菜单中的粗体搜索文本字符？

Question

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

• 起司
• 奶油乳酪

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

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

你可以试试

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