How do I use an HTML source with jQuery Autocomplete?

Question

I'm dealing with a really nasty ajax call to an HTMl source that I have to use. I need to take the html response and make it so that it can be listed in the jQuery autcomplete list.

The Autocomplete Function with Ajax

  $("#From, #To, #FromVacations, #ToVacations").autocomplete({
      source: function(request, response) {
          $.ajax({
            url: '/list.html',
            data: {
                prefix: request.term,
                type: 'F',
                ver: '1.0'
            },
            dataType: 'html',
            success: function(data) {
                response(data);
            }
          })
      }
  });

An example response

<html>
<head></head>
<body>
<div id="listautocomp" style="background:white">
    <ul id="ulSuggest">
        <li style="padding:0px;">
            <div id="WAS|0|0***&lt;b&gt;WAS&lt;/b&gt; - &lt;b&gt;Was&lt;/b&gt;hington All Airports, District of Columbia, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span><b>WAS</b>
                - <b>Was</b>hington All Airports, District of Columbia, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="SEA|1|0***SEA - Seattle/Tacoma, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>SEA
                - Seattle/Tacoma, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="SEA|0|0***SEA - Seattle All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>SEA
                - Seattle All Airports, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="IAD|1|0***IAD - &lt;b&gt;Was&lt;/b&gt;hington Dulles, District of Columbia, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>IAD
                - <b>Was</b>hington Dulles, District of Columbia, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="DCA|1|0***DCA - &lt;b&gt;Was&lt;/b&gt;hington National, District of Columbia, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>DCA
                - <b>Was</b>hington National, District of Columbia, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="GEG|1|0***GEG - Spokane, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>GEG
                - Spokane, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="GEG|0|0***GEG - Spokane All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>GEG
                - Spokane All Airports, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="PSC|1|0***PSC - Pasco, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>PSC
                - Pasco, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="BLI|1|0***BLI - Bellingham, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)">
                <span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>BLI
                - Bellingham, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="YKM|1|0***YKM - Yakima Air Terminal, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>YKM
                - Yakima Air Terminal, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="YKM|0|0***YKM - Yakima All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>YKM
                - Yakima All Airports, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="LKE|0|0***LKE - Seattle LKE Union, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>LKE
                - Seattle LKE Union, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="EAT|1|0***EAT - Wenatchee, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>EAT
                - Wenatchee, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="PUW|1|0***PUW - Pullman, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>PUW
                - Pullman, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="ALW|1|0***ALW - Walla Walla, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>ALW
                - Walla Walla, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="MWH|1|0***MWH - Moses Lake, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>MWH
                - Moses Lake, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="MWH|0|0***MWH - Moses Lake All Airports, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:hidden;;"></span>MWH
                - Moses Lake All Airports, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="CLM|1|0***CLM - Port Angeles, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>CLM
                - Port Angeles, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="OLM|1|0***OLM - Olympia, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>OLM
                - Olympia, <b>Was</b>hington, United States
            </div>
        </li>
        <li style="padding:0px;">
            <div id="PAE|1|0***PAE - Everett, &lt;b&gt;Was&lt;/b&gt;hington, United States"
                 onclick="SetLocationStrings(this.id)" onmouseover="SuggestMouseOver(this)"><span class="airporticon"
                                                                                                  style="visibility:visible;;"></span>PAE
                - Everett, <b>Was</b>hington, United States
            </div>
        </li>
    </ul>
</div>
</body>
</html>

So the question is this: How do I show ONLY the 'li's in the autocomplete dropdown? I also would like to preserve the bold tags in the dropdown Thanks!

Why must you use HTML? Can't you parse the HTML with a server side language and then feed the autocomplete JSON? — user1477388, Sep 01 '13 at 12:35
Because i'm restricted by the server I am using. That's what it's endpoint is. So I would like to parse the html when the ajax request is made. — CarbonDry, Sep 01 '13 at 12:41

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

You can try something like

// ...
success: function(data) {
  var tags = [];
  $('li div',data).each( function() {
    var tag = $(this).html();
    tag = $.trim(tag);
    tag = tag.replace(/\s{2,}/g, ' ');
    tags.push(tag);
  });
  $('#edit').autocomplete( { source: tags } );
}
// ...

According to this answer, you can try such a construct to support html tags:

// ...
$('#edit').autocomplete({ 
    source: tags,
    select: function(event, ui) {
        var text = ui.item.value;
        text = text.replace(/<\/?[^>]+>/gi, '');
        ui.item.value = text;
    }
}).data("ui-autocomplete")._renderItem = function(ul, item) {
    return $( "<li>" )
        .append( $( "<a>" ).html( item.label ) )
        .appendTo( ul ); 
};

// ...

edited May 23 '17 at 12:11

Community

1
1

answered Sep 01 '13 at 12:44

mas.morozov

2,666
1
22
22

But not sure about html tags in autocomlete items. – mas.morozov Sep 01 '13 at 12:47
Thanks for your help. Your solution works to populate the list, but it does not format the html in the list, so my question isn't answered fully yet. – CarbonDry Sep 01 '13 at 12:49
I figured it out, I need to use ._renderItem to do this. See this link: http://stackoverflow.com/questions/3488016/using-html-in-jquery-ui-autocomplete I will accept your answer – CarbonDry Sep 01 '13 at 12:53
Yes, already found it too ) Here is my first try to get it working for our case – mas.morozov Sep 01 '13 at 13:03
There's a slight problem when clicking the entry in the list. It appends to the input the full html string. – CarbonDry Sep 01 '13 at 13:23

How do I use an HTML source with jQuery Autocomplete?

1 Answers1