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

    });
});

Check this answer http://stackoverflow.com/a/3345101/3639582 — Shaunak D, Apr 06 '16 at 04:30
Possible duplicate of [How can I custom-format the Autocomplete plug-in results?](https://stackoverflow.com/questions/2435964/how-can-i-custom-format-the-autocomplete-plug-in-results) — Prateek, Nov 18 '18 at 17:09

Ankush Jain · Answer 1 · 2016-04-19T10:40:21.077

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);
            };
        },

Well -- almost perfect. At jsfiddle.net/mgjftrdz/1 if I type in 'app' it bolds 'appl' instead of just 'app'. Can you see a fix for that? — user1946932, Apr 08 '16 at 04:09

score 1 · Answer 2 · answered Apr 06 '16 at 04:40

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>

thanks though it stops working after the first item is entered (e.g. after you enter a comma after the first work and start entering the second word). Can you see a fix? — user1946932, Apr 08 '16 at 04:11

Bold search text characters in jQuery Autocomplete dropdown?

2 Answers2