Question

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

我们想要实现的目标是：

当用户点击列表视图搜索时，会显示一小组选项（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

但无法找到一种方法，只允许我们显示具有焦点的列表视图（并非所有可过滤的列表视图）。

Answer 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

带有过滤器的jQueryMobile列表显示，单击显示项目

1 个答案: