テキストボックスをセレクトボックスのように使用するjQueryプラグイン

Tweet: June 11th, 2015

DEMO

Option要素が100個以上あるセレクトボックスを100個以上配置するという無謀なページを以前作成し、尋常じゃない表示遅延が発生したので、それを解消する為に作成したプラグインになります。

テキストボックスを100個配置して、共通のOption要素を1つ用意するだけで良いので、表示速度が格段に速まります。また、絞り込み検索の機能も付けているので、Option要素が多くなっても問題無く利用できると思います。

jquery.smSearchInputSelector.js

Inputタグのテキストボックスをセレクトボックスのような選択式の要素に変換します。

予め用意しておいた、選択要素の中の値しか入力できません。

テキストボックスに文字列を入力すると、絞り込み検索を行います。

Options

追記：「selected」と「addfontsize」を追加しました。

Name	Default	Description
uniquename	jsSearchInputSelector (string)	プラグインを適用する際に使用するの名称と同じ名称を指定する。例：$('.hoge').smSearchInputSelector({uniquename:'hoge'});
classes	{ selector:'jsSearchInputSelector', hidden:'hidden', dropdown:'dropdown' } (object)	各要素のクラス名（変更する場合は全てを定義）
selector	[] (object)	選択要素のオブジェクトを挿入 [{value:'',name:'',search:''},...]
selected	function	選択時のコールバック関数例：function(val){}
max-height	250 (int)	ドロップダウンの最大の高さ
addfontsize	0 (int)	文字サイズの調整

data属性

Name	Description
data-value=""	初期値を入力

CSS

/*
 * 選択リストのスタイルシート
 * .jsSearchInputSelectorは「classes.selector」と同じにする
 */
.jsSearchInputSelector{}
.jsSearchInputSelector.dropdown{ display:none; position:absolute; top:0; left:0; background-color:#fff; box-shadow:0 2px 3px rgba(0,0,0,0.2); }
.jsSearchInputSelector.dropdown div{ border:1px solid #7f9db9; }
.jsSearchInputSelector.dropdown dl dt{ padding:4px; }
.jsSearchInputSelector.dropdown dl dt p{ line-height:1; border:1px solid #c9c9c9; }
.jsSearchInputSelector.dropdown dl dt p input{ padding:4px 1%; width:98%; font-size:14px; border:none; }
.jsSearchInputSelector.dropdown dl dd{}
.jsSearchInputSelector.dropdown div ul{ margin:0; padding:0; list-style:none; overflow:auto; }
.jsSearchInputSelector.dropdown div ul li{ padding:1px 3px; color:#000; line-height:1; cursor:default; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.jsSearchInputSelector.dropdown div ul li.selected{ color:#fff; background-color:#aaa; }
.jsSearchInputSelector.dropdown div ul li:hover{ color:#fff; background-color:#1e90ff; }

記述例（Javascript）

/*
 * value : 値
 * name : 選択リストに表示する名称
 * search : 検索に該当する文字列
 */
var obj = [
    {value:'', name:'', search:''},
    {value:1, name:'hoge1', search:'hoge1ほげ1ホゲ1'},
    {value:2, name:'hoge2', search:'hoge2ほげ2ホゲ2'},
    {value:3, name:'hoge3', search:'hoge3ほげ3ホゲ3'},
];

$(function(){
    $('.selector').smSearchInputSelector({
        uniquename : 'selector',
        selector : obj,
        selected : function (val) {
            console.log(val);
        }
    });
});

記述例（HTML）

<!-- value属性に初期値を入れる場合は「obj」の「name値」を入れる。 -->
<div><input class="selector" type="text" name="hogehoge[]" data-value="" value="" /></div>
<div><input class="selector" type="text" name="hogehoge[]" data-value="2" value="hoge2" /></div>
<div><input class="selector" type="text" name="hogehoge[]" data-value="" value="" /></div>

DEMO