Sidebar Search Plugin

側邊欄搜尋外掛提供了從側邊欄選單項目中搜尋選單項目的功能。

使用方法

此外掛可以作為 jQuery 外掛啟用，也可以使用資料 API 啟用。

資料 API

將以下資料屬性 data-widget="sidebar-search" 添加到側邊欄內的輸入群組 (input-group) 中即可啟用此外掛。您可以使用下面的 HTML 標記來快速開始。

jQuery

jQuery API 提供了更多可自訂的選項，允許開發人員在呈現之前預先處理請求，並在呈現之後進行後處理。

("[data-widget="sidebar-search"]").SidebarSearch(options)

HTML 標記

將此 HTML 標記放置在 div.user-panel 之後。

<div class="form-inline">
  <div class="input-group" data-widget="sidebar-search">
    <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
    <div class="input-group-append">
      <button class="btn btn-sidebar">
        <i class="fas fa-search fa-fw"></i>
      </button>
    </div>
  </div>
</div>

選項

名稱	類型	預設值	描述
arrowSign	字串	’->’	選單項目路徑之間的箭頭符號。
minLength	數字	3	最小搜尋查詢長度。
maxResults	數字	7	要顯示的最大搜尋結果數。
highlightName	布林值	TRUE	是否要突出顯示選單項目名稱。
highlightPath	布林值	FALSE	是否要突出顯示選單項目路徑。
highlightClass	字串	’text-light’	突出顯示的類別。
notFoundText	字串	’找不到任何項目！	如果找不到任何選單項目，則顯示的回應文字。

方法

方法	描述
init	初始化側邊欄搜尋外掛並註冊所有可見的選單項目。
toggle	切換搜尋下拉式清單。
close	關閉搜尋下拉式清單。
open	開啟搜尋下拉式清單。
search	觸發搜尋。

範例： $('[data-widget="sidebar-search"]').SidebarSearch('toggle')