jquery mobile使用input - ul - li like a select过滤动态结果答案

【问题标题】：jquery mobile use input - ul - li like a select to filter dynamic resultsjquery mobile使用input - ul - li like a select过滤动态结果
【发布时间】：2019-11-14 04:32:15
【问题描述】：

试图将 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>

没有办法让它工作:(

有什么提示吗？

【问题讨论】：

您看到listview 正确填充了吗？
当然问题出在我做出选择的时候

标签： javascript html jquery-mobile

【解决方案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试试看）

【讨论】：

哇到目前为止还没有尝试过，但似乎正在工作！你能解释一下为什么 vclick 而不是 click 和 a i 而不是 ul 吗？