jQuery Mobile 過濾

可過濾元素

所有的元素如果有一個或更多的子元素均可過濾。

如何建立搜尋欄位:

  • 你想過濾的元素必須使用 data-filter="true" 屬性。
  • 建立 <input> 元素並指定 id，元素上加上 data-type="search" 屬性。這樣就能建立基本的搜尋欄位。將 <input> 元素放置於一個表單中，表單 <form> 元素使用 "ui-filterable" 類 - 該類會調整搜尋欄位與過濾元素的外邊距。
  • 接著為過濾的元素新增 data-input 屬性。該值需要是 <input> 元素的 id。

接下來我們建立一個可過濾的列表：

列表中搜索元素

<form class="ui-filterable">
  <input id="myFilter" data-type="search">
</form>

<ul data-role="listview" data-filter="true" data-input="#myFilter">
  <li><a href=https://www.itread01.com/jquerymobile/"#">Adele
  <li><a href=https://www.itread01.com/jquerymobile/"#">Billy
  <li><a href=https://www.itread01.com/jquerymobile/"#">Calvin
</ul>

嘗試一下 ?

提示: 可以在搜尋欄位中使用 placeholder 屬性來設定提示資訊：

例項

<input id="myFilter" data-type="search" placeholder="根據名稱搜尋..">

嘗試一下 ?

自定義過濾

一般的插入到各個列表項的文字就是作為過濾的文字使用(如 A 對應 "Adele" 或 "B" 對應 "Billy")。 但是，如果你想指定自定義的過濾的文字，你需要在子元素中使用 data-filtertext 屬性:

例項

<li data-filtertext="fav"><a href="https://www.itread01.com/jquerymobile/#">Adele</a></li>

嘗試一下 ?
Note 如果你在元素中使用了 data-filtertext 屬性，元素的源文字內容在過濾時將被忽略， 這時你如果還要查詢列表項"Adele"，需要使用的關鍵字為：f, a, v 或 fav。
例項

更多例項

過濾摺疊列表
如何過濾摺疊的列表。

過濾表格
如何過濾表格內容。

過濾 <div> 元素
如何過濾 <div> 元素中包含的子 <p> 元素。