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***<b>WAS</b> - <b>Was</b>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, <b>Was</b>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, <b>Was</b>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 - <b>Was</b>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 - <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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, <b>Was</b>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!