Question

Not sure how these are not being converted to html objects.

I have this function :

var findPattern = new RegExp(request.term.toLowerCase(), "ig");
var highlightMatch = function(match) {
  return '<span class="highlight">' + match + '</span>';
};

And it gets used here :

source: function(request, response) {
  $autocomplete_xhr = $.ajax({
    // .. truncated for your viewing pleasure ..
    success: function() {
      return {
         label: $.string(label).interpolate({name: row.customer.name, address: (row.customer.addr == null) ? '' : row.customer.addr}).str.replace(findPattern, highlightMatch),

But the result is I can see the <span> tags instead of them being parsed as HTML.

Any ideas why this is happening, and what I can do to remedy this?

Answer 1

Got it! Added this to the end of my Autocomplete code.. Which is to my understand the exact same code that is included in the JS library. So I’m not sure why this would work only if extracted from the source and manually put in the file ..

      })
      .each(function() {
        // Señor Hackovitz for rendering HTML elements..
        $(this).data("autocomplete")._renderItem = function(ul, item) {
          return $( "<li></li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + item.label + "</a>" )
              .appendTo( ul );
        };
      })

I used an .each statement following @Mu Is Too Short’s example in case there are many autocompletes available.

Cheers!