Loading span as text

Question

I'm running into an issue with JqueryUI autocomplete in which the span that is being returned is rendering as text in the drop down (as seen below).

I'm using Jquery Ui 1.8.17 and Jquery 1.6.4

The autocomplete function:

  $('#search').autocomplete({
            source: '/Search/AutoComplete',
            html: true,
            delay: 0
        });

autocomplete with spans

The browser is not loading the span into the DOM. The reason i assume is because it needs to HTML encode the text. Here is the markup. As you can see it isn't encoded.

<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">&lt;span class="autocomplete cat"&gt;Cat&lt;/span&gt;</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">&lt;span class="autocomplete carbon"&gt;Carbon&lt;/span&gt;</a>
</li>

I had read a few thing of an HTML extension but I didn't find anything concrete. Is this issue fixable with J Query or do I need to modify my source data?

see if this helps you [http://stackoverflow.com/questions/3488016/using-html-in-jquery-ui-autocomplete][1] [1]: http://stackoverflow.com/questions/3488016/using-html-in-jquery-ui-autocomplete — imnancysun, Jan 10 '15 at 00:59

score 0 · Accepted Answer · edited May 23 '17 at 12:07

the solution posted in Using HTML in jQuery UI autocomplete was the solution for this.

My JS ended up looking like:

$('#searchPhrase').autocomplete({
        source: '/Search/AutoComplete',
        html: true,
        delay: 0,
        minLength: 2
    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
    };

Loading span as text

1 Answers1