1

Trying to get jQuery UI Autocomplete to work with data labels that may have entities in them, such as a hyphen ( - ).

I extended the function so that what shows in the suggestion list works and shows the character instead of the entity code, but cannot figure out how to make it do the same when the item is chosen and it populates the text field.

(function( $ ) {
    $(function() {
        var url = SQMSAutocomplete.url + "?action=sqms_auto_search";
        $( "#sqms-auto-search" ).autocomplete({
            source: url,
            delay: 500,
            minLength: 3,

            select: function(event, ui){
               console.log(ui.item.link)
                // window.location = ui.item.url
             }
        })
        .autocomplete( "instance" )._renderItem = function( ul, item ) {
            return $( "<li>" )
              .append( item.label )
              .appendTo( ul );
          };
    });

})( jQuery );

Does that make sense?

Thank you

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
thatryan
  • 1,551
  • 6
  • 21
  • 39

2 Answers2

4

You should be able to accomplish this by decoding the HTML entities before assigning the value of the <input /> to the desired string.

Here's a simple example:

select: function (event, ui) {
    event.preventDefault();

    this.value = $('<div />').html(ui.item.label).text();
}

All credit for decoding HTML entities with JavaScript goes to this answer. Be aware of the usual disclaimers about decoding HTML entities this way: you are opening yourself up to possible XSS vulnerabilities.

The "gotcha" here is that you must prevent the default action of the select event, which is to put the label or value inside of the input. Here we're overriding that behavior and decoding the text first.

Example: http://jsfiddle.net/822fbwef/

Community
  • 1
  • 1
Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
  • Sweet thanks, this totally worked. Can you tell me 'how' it works though? What is that div doing... I would think that would add a div into the text field? – thatryan May 13 '15 at 21:12
  • 2
    @thatryan: So that piece of code is creating a `
    ` that's not attached to the DOM. Then it's setting the HTML of that `div` to the item label, which is going to decode the HTML entities in the string. Finally, the text of the `div` (which is the decoded string) is retrieved using jQuery's `.text()` function     – Andrew Whitaker May 13 '15 at 21:17
  • Ah, so it is just creating a "shadow" element to use for manipulation, but not actually putting it anywhere? – thatryan May 13 '15 at 21:22
  • @thatryan: Yep, that's pretty much it! – Andrew Whitaker May 13 '15 at 21:23
  • Amazing solution, thank you for this. – Milo Persic Feb 23 '22 at 16:12
1

You could decode the entities in the labels by using a function for the source option. That should take care of both issues. That is, you wouldn't have to override the ._renderItem() function in that case.

$("#sqms-auto-search").autocomplete({
    source: function(request, response) {
        $.getJSON(url, { term: request.term }, function(items) {
            response($.map(items, function(item) {
                return $('<span></span>').html(item.label).text();
            });
        });
    },
    delay: 500,
    minLength: 3
});

jsfiddle

John S
  • 21,212
  • 8
  • 46
  • 56