jquery-flexselect /検索ができるセレクトタグ


jquery-flexselect」はフォームのセレクトタグが検索もできるようになったものです。選択肢の多いセレクトタグの場合はこちらを使うことで入力をサポートできます。

選択タグ

🚕 導入手順

スクリプト/CSSの読み込み

<link rel="stylesheet" href="flexselect.css" type="text/css" media="screen" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="liquidmetal.js" type="text/javascript"></script>
<script src="jquery.flexselect.js" type="text/javascript"></script>

flexselectの適用

DOMが準備されたら、セレクトボックスにflexselectを適用するコードを追記します。

jQuery(document).ready(function() {
$("select.flextselect").flexselect();
})

HTMLにクラスを設定

HTML側にflexselect用のクラスを設定します。

<select class="flexselect">
<option value="1">George Washington</option>
...
</select>

🐹 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)