I've implemented jQuery Autoplete for a client. Now they want me to highlight (e.g. make bold) the the portion of the result that matches the text they've typed.

e.g. the user types "something", and the results are as follows:

something a

something b

Another something

Do something else

Is this functionality built into jQuery Autoplete? If so, what is it?

Or is this something I'll have to implement myself? If so, where do I start with that?

I've implemented jQuery Autoplete for a client. Now they want me to highlight (e.g. make bold) the the portion of the result that matches the text they've typed.

e.g. the user types "something", and the results are as follows:

something a

something b

Another something

Do something else

Is this functionality built into jQuery Autoplete? If so, what is it?

Or is this something I'll have to implement myself? If so, where do I start with that?

• javascript
• jquery
• jquery-ui
• jquery-autoplete
• jquery-ui-autoplete

• 1 Which autoplete - the one in jQuery UI, or one of the other implementations? I think the (deprecated) bassistance.de autoplete does this already, for example, but the APIs are different to plug them into your page. – Rup Commented Aug 22, 2011 at 11:18
• @Rup: this one: docs.jquery./UI/Autoplete – DaveDev Commented Aug 22, 2011 at 11:24
• Check this out: stackoverflow./questions/9887032/… – Mircea Slimu Commented Jan 8, 2020 at 21:59

1 Answer 1

I had the same requirement previously.

Below code may work for you.

"You need to be careful with selectors"

<script>
  $("#input-search-box")
    .autoplete({
      //your code
    })
    .data("autoplete")._renderItem = function(ul, item) {
    var items = $("<li></li>").data("ui-autoplete-item", item);
    //match and key variables highlight the user's typed input rendering in bold blue for dropdown items.
    var match = new RegExp("^" + this.term, "i"); //i makes the regex case insensitive

    //change initial typed characters of all item.label   replace is plain JS
    var key = item.label.replace(
      match,
      '<span class="required-drop">' + this.term + '</span>'
    );

    items.html("<a>" + key + "</a>").append(ul);
  }; 
</script>

Let me know if you need more help to implement this code.