Полужирный текст в текстовом формате jQuery Autocomplete?

Question

Если ввести «че» в https://jsfiddle.net/mgjftrdz/ (код из http://jqueryui.com/autocomplete/#multiple) перечисляется два элемента:

• Сыра
• Крема-сыр

Каких изменений в том, что мне нужно, чтобы сделать эти особенности символы выделены жирным шрифтом в раскрывающихся результатах?

• Че ESE

• Крем Che 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

Просто используется вариант создания для подготовки 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>