サイドバー検索プラグイン | AdminLTE v3.2 ドキュメント

サイドバー検索プラグインは、サイドバーメニューのエントリからメニューアイテムを検索する機能を提供します。

使用法

このプラグインは、jQueryプラグインとしてアクティベートするか、データAPIを使用することができます。

データAPI

サイドバー内のインプットグループに次のデータ属性 data-widget="sidebar-search" を追加することでプラグインをアクティベートします。クイックスタートするには、以下の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	文字列	’No element found!	メニューアイテムが見つからない場合の応答テキストです。

メソッド

メソッド	説明
init	SidebarSearchプラグインを初期化し、表示されているすべてのメニューアイテムを登録します。
toggle	検索ドロップダウンリストを切り替えます。
close	検索ドロップダウンリストを閉じます。
open	検索ドロップダウンリストを開きます。
search	検索を実行します。

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