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>