Bold search text characters in jQuery Autocomplete dropdown?

Question

If you enter "che" in https://jsfiddle.net/mgjftrdz/ (code from http://jqueryui.com/autocomplete/#multiple) it lists two items:

• Cheese
• Cream-cheese

What changes to that would I need to make those particular characters bold in the drop-down results like this?

• Cheese

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

Just used a create option to prepare HTML that needs to be rendered.

Below is the piece of that code. Although I know that this is not optimized one but you can do that yourself. But I think this is what you require.

Here is working 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

You can try

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