jquery 移动端使用输入 - ul - li 如 select 过滤动态结果

Question

试图将 li 的文本分配给输入的值，我快疯了。

我已经阅读了大量的讨论，似乎通常是按照我尝试的方式进行的，但我无法让它发挥作用。

这是我的 HTML 和我填充ul并进行选择的函数

 $(".cityFilter").on("filterablebeforefilter", function(e, data) { var $ul = $(this), $input = $(data.input), value = $input.val(), html = ""; $ul.html(""); if (value && value.length > 2) { $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>"); $ul.listview("refresh"); $.ajax({ url: "http://gd.geobytes.com/AutoCompleteCity", dataType: "jsonp", crossDomain: true, data: {q: $input.val()} }).then(function(response) { $.each(response, function(i, val) { html += "<li>" + val + "</li>"; }); $ul.html(html); $ul.listview("refresh"); $ul.trigger("updatelayout"); }); } }); $('.cityFilter').on('click', 'li', function(){ var $input = $(this).parent().parent().find('.resFilter')[0]; var $text = $(this)[0].textContent; $text = $text.substr(0,$text.indexOf(",")); $input.fadeOut("fast").val($text).fadeIn("fast"); $(this).closest(".cityFilter").empty(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ui-block-a"> <div class="ui-field-contain"> <input class="resFilter" id="departing_city" data-type="search" placeholder="Partenza"> <ul id="dep_autocompl" class="cityFilter" data-role="listview" data-inset="true" data-filter="true" data-input="#departing_city"></ul> </div> </div>

没有办法让它工作:(

有什么提示吗？

Answer 1

我无法让AutoCompleteCity工作，但这里有一个jsonplaceholder示例：

 $(document).on("pagecreate", "#page-one", function() { $(".cityFilter").on("filterablebeforefilter", function(e, ui) { var $ul = $(this), $input = $(ui.input), value = $input.val(), html = ""; $ul.empty(); if (value && value.length > 2) { $.ajax({ url: "https://jsonplaceholder.typicode.com/users", dataType: "json", crossDomain: true, beforeSend: function() { $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>").listview("refresh"); } }).then(function(response) { $.each(response, function(i, val) { html += '<li data-icon="false"><a href="#">' + val.name + '</a></li>'; }); $ul.html(html).listview("refresh"); }); } }); $('.cityFilter').on('vclick', 'a', function(){ var text = $(this).text(), ul = $(this).closest('ul'), input = $(ul).data('input'); $(input).fadeOut('fast', function() { $(ul).empty(); $(this).val(text).fadeIn('fast'); }) return false; }); });

 <,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: user-scalable=no"> <link rel="stylesheet" href="https.//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5:css"> <script src="https.//code.jquery.com/jquery-2.2.1.min:js"></script> <script src="https.//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> </head> <body> <div id="page-one" data-role="page"> <div role="main" class="ui-content"> <input class="resFilter" id="departing_city" data-type="search" placeholder="Partenza"> <ul id="dep_autocompl" class="cityFilter" data-role="listview" data-inset="true" data-filter="true" data-input="#departing_city"> </ul> </div> </div> </body> </html>

（通过输入clem来试试）