jQuery Mobile 可过滤输入选项

jQuery Mobile提供了一种可过滤的输入选项，该功能使用户可以通过搜索框输入字符来过滤下拉列表或列表视图中的选项，以便更快地找到所需的选项。

使用方法

要使用可过滤的输入选项，在HTML代码中使用data-filter="true"属性来标记下拉列表或列表视图。例如，下面是一个使用可过滤输入选项的下拉列表：

<select data-filter="true">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

要使用可过滤的列表视图，请在ul元素中使用data-filter="true"属性。例如，下面是一个使用可过滤输入选项的列表视图：

<ul data-role="listview" data-filter="true">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

自定义搜索输入框

默认情况下，jQuery Mobile会在可过滤的下拉列表或列表视图上添加一个搜索框。但是，您可以在JavaScript中使用filterable()方法自定义搜索框元素。例如，下面是一个在列表视图上使用自定义搜索框的例子：

<div id="my-search-box" data-role="fieldcontain">
  <label for="search-input">Search:</label>
  <input type="search" name="search-input" id="search-input" value="" />
</div>

<ul data-role="listview" data-filter="true" data-input="#search-input">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

<script>
  $(document).on("pagecreate", function() {
    $("#my-search-box").filterable({
      filterCallback: function(index, searchValue, item) {
        // 自定义搜索回调函数
      },
      input: "#search-input",
      children: "> li"
    });
  });
</script>

在上面的JavaScript代码中，filterable()方法的input选项将搜索框元素的ID设置为#search-input，这个搜索框元素将用于过滤列表视图。此外，还指定了filterCallback回调函数，该函数将在搜索时调用，以便自定义搜索行为。

总结

使用jQuery Mobile的可过滤输入选项可以方便用户快速查找他们需要的选项。您可以自定义搜索框，以便更好地适应您的应用程序需求。