Javascript 如何将HTML源代码与jQuery自动完成一起使用？_Javascript_Jquery_Ajax_Autocomplete

Javascript 如何将HTML源代码与jQuery自动完成一起使用？

javascript jquery ajax autocomplete

Javascript 如何将HTML源代码与jQuery自动完成一起使用？,javascript,jquery,ajax,autocomplete,Javascript,Jquery,Ajax,Autocomplete,我正在处理一个对我必须使用的HTMl源的非常讨厌的ajax调用。我需要获取html响应并将其设置为可以在jQuery完整列表中列出使用Ajax的自动完成功能 $("#From, #To, #FromVacations, #ToVacations").autocomplete({ source: function(request, response) { $.ajax({ url: '/list.html', d

我正在处理一个对我必须使用的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>




是
-华盛顿哥伦比亚特区所有机场，美国


大海
-西雅图/塔科马，华盛顿，美国


大海
-西雅图所有机场，华盛顿，美国


网络成瘾
-华盛顿杜勒斯，哥伦比亚特区，美国


DCA
-华盛顿国家，哥伦比亚特区，美国


GEG
-斯波坎，华盛顿，美国


GEG
-斯波坎所有机场，华盛顿，美国


PSC
-帕斯科，华盛顿，美国


BLI
-贝灵汉，华盛顿，美国


YKM
-亚基马机场，华盛顿，美国


YKM
-亚基马所有机场，华盛顿，美国


LKE
-西雅图LKE联盟，华盛顿，美国


吃
-Wenatchee，华盛顿，美国


呕吐
-普尔曼，华盛顿，美国


ALW
-瓦拉瓦拉，华盛顿，美国


兆瓦
-摩西湖，华盛顿，美国


兆瓦
-摩西湖所有机场，华盛顿，美国


CLM
-美国华盛顿州洛杉矶港


奥尔姆
-奥林匹亚，华盛顿，美国


PAE
-埃弗雷特，华盛顿，美国

所以问题是：如何在“自动完成”下拉列表中只显示“li”我还想保留下拉列表中的粗体标记谢谢

您可以尝试以下方法

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

根据，您可以尝试这样的构造来支持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 ); 
};

// ...

/。。。
$（'#编辑'）。自动完成（{
资料来源：标签，
选择：功能（事件、用户界面）{
var text=ui.item.value；
text=text.replace（/]+>/gi'，）；
ui.item.value=文本；
}
}).data（“ui自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“”）
.append（$（“”）.html（item.label））
.附录（ul）；
};
// ...

为什么必须使用HTML？你不能用服务器端语言解析HTML，然后输入自动完成的JSON吗？因为我受我使用的服务器的限制。这就是它的终点。因此，我希望在发出ajax请求时解析html。但不确定AutoMLETE项目中的html标记。谢谢您的帮助。您的解决方案可以填充列表，但它没有格式化列表中的html，因此我的问题还没有得到完全回答。我想出来了，我需要使用。要做到这一点，请使用renderItem。查看此链接：我将接受您的回答是的，也已经找到了）这是我第一次尝试使其适用于我们的案例单击列表中的条目时出现了一个小问题。它将完整的html字符串附加到输入。