如何使用带有 jQuery 自动完成功能的 HTML 源代码？答案

【问题标题】：How do I use an HTML source with jQuery Autocomplete?如何使用带有 jQuery 自动完成功能的 HTML 源代码？
【发布时间】：2013-09-04 16:32:40
【问题描述】：

我正在处理对我必须使用的 HTMl 源的非常讨厌的 ajax 调用。我需要获取 html 响应并使其可以在 jQuery 自动完成列表中列出。

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);
            }
          })
      }
  });

示例响应

<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>

所以问题是这样的：如何在自动完成下拉菜单中只显示“li”？ 我也想保留下拉菜单中的粗体标签谢谢！

【问题讨论】：

为什么必须使用 HTML？你不能用服务器端语言解析 HTML，然后提供自动完成 JSON 吗？
因为我受到我正在使用的服务器的限制。这就是它的端点。所以我想在发出ajax请求时解析html。

标签： javascript jquery ajax autocomplete

【解决方案1】：

你可以试试

// ...
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 } );
}
// ...

根据this answer，可以试试这样的构造来支持html标签：

// ...
$('#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 ); 
};

// ...

【讨论】：

但不确定自动完成项目中的 html 标签。
感谢您的帮助。您的解决方案可以填充列表，但它没有格式化列表中的 html，所以我的问题还没有完全回答。
我想通了，我需要使用 ._renderItem 来执行此操作。看到这个链接：stackoverflow.com/questions/3488016/…我会接受你的回答
是的，也已经找到了）这是我第一次尝试让它适用于我们的案例
点击列表中的条目时出现小问题。它将完整的 html 字符串附加到输入。