带有过滤器的 jQuery Mobile 列表视图显示，单击时显示项目答案

【问题标题】：jQueryMobile listviews with filter reveal, show items on click带有过滤器的 jQuery Mobile 列表视图显示，单击时显示项目
【发布时间】：2016-10-18 14:32:09
【问题描述】：

我们在一个页面上有多个可过滤的输入，希望在可过滤的列表视图具有焦点时显示列表。

我们想要实现的是：

当用户单击列表视图搜索时，会显示一小组选项（5 个或 10 个）
当用户开始在搜索框中输入文本时，我们使用 filertablebeforefilter 事件来缩小选择范围并刷新 li 条目。

HTML：

<input type="hidden" id="jobtemp" name="jobtemp" value="" />
        <input type="hidden" id="jobcode" name="jobcode" />
        <ul id="jobautocomplete" data-filter-reveal="true" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a Job ..." data-filter-theme="a">
        <li><a href="#">Job 1</a>

        </li>
        <li><a href="#">Job 2</a></li>
        </ul>
<input type="hidden" id="phasetemp" name="phasetemp" value="" />
        <input type="hidden" id="phasecode" name="phasecode" />
        <ul id="phaseautocomplete" data-filter-reveal="true" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a Cost Code ..." data-filter-theme="a">
        <li><a href="#">Phase 1</a>

        </li>
        <li><a href="#">Phase 2</a></li>
        </ul>

代码：

$("#jobautocomplete").on("filterablebeforefilter", function (e, data) {
  // .. ajax to refresh the <li> values in the filterable listview
}

$("#phaseautocomplete").on("filterablebeforefilter", function (e, data) {
   // .. ajax to refresh the <li> values in the filterable listview, also     filter based on the value in the jobautocomplete text field.
}

我们尝试了类似的方法

jQueryMobile listview with filter reveal, show items on click

但无法找到一种方法让我们只显示具有焦点的列表视图（不是所有可过滤的列表视图）。

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

从输入中显示具有焦点的列表视图：

首先找到类 ui-filterable 的父窗体然后使用jQuery next 函数找到兄弟UL。

$("input[data-type='search']").on("focus", function () {        
        $(this).val("");
      var list = $(this).parents("form.ui-filterable").next('ul');
      list.listview('destroy').data("filter-reveal", false);
        list.find('li').removeClass("ui-screen-hidden");
        list.listview('refresh');
}).on("keydown", function () {
      var list = $(this).parents("form.ui-filterable").next();
      list.listview('destroy').data("filter-reveal", true);
        list.find('li').addClass("ui-screen-hidden");
        list.listview('refresh');
});

DEMO

【讨论】：