まだデータがありません。
入力候補から文字列を検索「Two levels collapsable lists」
当ページのリンクには広告が含まれています。
スポンサーリンク
あらかじめ用意された候補から文字列を検索する（絞っていく）jQueryプラグイン「Two levels collapsable lists」を紹介します。
jQueryプラグイン「Two levels collapsable lists」
リストの候補が多すぎて、探しづらい……。そんな場合でも大丈夫！このプラグインを利用すれば、探したい文字列がすぐに見つかります。フォームに探したい文字列を入力するたびにリストが動的に絞られていくので、すぐに探したい文字列がみつかります。ユーザービリティに優れた、便利なプラグインですね。
ただ、日本語の検索はできません。MITライセンスなので、マルチバイト文字も検索できるようにカスタマイズしてみてはいかがでしょうか。
スポンサーリンク
デモでは、PHPの関数リストがだらだらと見づらく並んでいます。フォームにアルファベットを入力して、動作を体感してみてください。
「Two levels collapsable lists」のデモ
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Two levels collapsable listsのデモでーす。">
<title>Two levels collapsable lists - jQuery Plugin Demo</title>
<link rel="stylesheet" href="jquery-video-lightning.css">
</head>
<body>
<h1>Two levels collapsable lists のデモでーす。</h1>
<ul id="my-list">
<li class="header">数学</li>
<ul>
<li>数値の絶対値を取得 - abs</li>
<li>三角関数を取得 - sin、cos、tan</li>
<li>角度の度数をラジアンへ変換 - deg2rad</li>
<li>数値のべき乗を取得 - pow</li>
<li>自然対数の累乗を取得 - exp</li>
<li>自然対数、常用対数 - log、log10</li>
<li>最大値を取得 - max</li>
<li>最小値を取得 - min</li>
<li>乱数を生成 - mt_rand</li>
</ul>
<li class="header">文字列</li>
<ul>
<li>文字列を16進数に変換 - bin2hex</li>
<li>ASCIIコードを特定の文字に変換 - chr</li>
<li>文字列を配列に変換 - explode</li>
<li>配列を文字列に変換 - implode</li>
<li>文字列のエンコーディングを変換 - mb_convert_encoding</li>
<li>文字列のエンコーディングを検出 - mb_detect_encoding</li>
<li>文字列のエンコーディング検出順の取得と設定 - mb_detect_order</li>
<li>mbstringのパラメータを取得 - mb_get_info</li>
</ul>
<li class="header">ネットワーク</li>
<ul>
<li>DNSレコードを検索 - checkdnsrr</li>
<li>HTTPヘッダーを取得 - get_headers</li>
<li>IPアドレスからホスト名を取得 - gethostbyaddr</li>
<li>ホスト名からIPアドレスを取得 - gethostbyname、gethostbynamel</li>
<li>プロトコル名からプロトコル番号を取得 - getprotobyname</li>
</ul>
</ul>
<script src="//code.jquery.com/jquery-2.0.0.js"></script>
<script src="collapsable-list.js"></script>
<script type="text/javascript">
$('#my-list').collapsableList('.header', {search: true});
</script>
<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/two-levels-collapsable-lists/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク