一：搜索欄

應用場景：一般用於在含有列表的頁面中進行內容檢索。

二：定義搜索欄

搜索欄應該放到“.page”內，“.page-content”前；

在page-content中，需要定義 檢索失敗 的提示文本，以及陳列內容的列表。

<div class="page">
    <!-- 1:定義搜索欄 -->
    <form class="searchbar">
        <div class="searchbar-input">
            <input type="search" placeholder
 
="提示文本">
            <a href="#" class="searchbar-clear"></a>
        </div>
        <a href="#" class="searchbar-cancel">取消</a>
    </form>
    
    <!--2:搜索時的遮蓋物：輸入搜索關鍵字時，對非搜索欄部分內容進行暗色調遮蓋處理-->
    <div class="searchbar-overlay"></div>
    
    <!--
 
 3:頁面內容 -->
    <div class="page-content">
       
        <!-- 4：檢索失敗 -->
        <div class="content-block searchbar-not-found">
                檢索不到內容的提示文本...
        </div>
         
        <!-- 5：列表視圖 -->
        <div class="list-block list-block-search searchbar-found"
 
>
            <ul>
                列表內容。。。
            </ul>
        </div>
    </div>
</div>

三：初始化搜索欄

我們需要對搜索欄進行一些初始化處理，最常見的是在html文件中定義搜索欄時，通過 data-xx 屬性來進行初始化設定：

<div class="page">
    <!-- 1:創建並初始化搜索欄 -->
    <form class="searchbar searchbar-init" data-search-list="被檢索的列表" data-search-in="檢索列表元素的哪個部分 .item-xx" data-found="檢索結果在哪裏呈現" data-not-found="檢索失敗在哪裏提示">

        <div class="searchbar-input">
            <input type="search" placeholder="Search">
            <a href="#" class="searchbar-clear"></a>
        </div>
        <a href="#" class="searchbar-cancel">Cancel</a>
    </form>
    
    <div class="searchbar-overlay"></div>
    
    <div class="page-content">
        <div class="content-block searchbar-not-found">
               檢索失敗的內容
        </div>
 
        <div class="list-block list-block-search searchbar-found">
            <ul>
               被檢索的列表、檢索結果的呈現處...
               列表元素中通過 class="item-xx"來為每一部分作標記。
            </ul>
        </div>
    </div>
</div> 

Framework7學習筆記之 搜索欄（舊版）