SELECTボックス内の検索と項目をリアルタイムに追加する

SELECTボックスの項目が増えれば増えるほど探すのが大変になってきます。
検索フォームに文字を入力することで、部分一致で候補を絞り込めて選択するのを助けます。
また、コールバックを渡すことで検索結果にない項目を追加することも可能です。

プラグインのダウンロード

$(SELECT).vSelect(OPTION);

　　パラメーター
　　　　SELECT (HTMLInputElement.files)
　　　　　　e.g.) $('#items')
　　　　　　e.g.) $('select.item')

　　　　OPTION (Object)
　　　　　　noMatchTxt (String)："一致しません"
　　　　　　　　検索にヒットしなかった場合の文言を変更。

　　　　　　maxHeight (String)："300px"
　　　　　　　　プルダウンの最大高さを指定。

　　　　　　addSelectFunc (Function)
　　　　　　　　検索結果にない項目を追加する関数
　　　　　　　　関数を渡すことで機能が有効化される。
　　　　　　　　第１引数：追加したい値
　　　　　　　　第２引数：対象のselect要素
　　　　　　　　戻り値：trueを返す事で項目に追加され、選択状態になる。

　　　　　　addSelectTxt (String)："追加して選択する"
　　　　　　　　検索にヒットしなかった場合の文言を変更。
　　　　　　　　addSelectFuncが必要

　　　　　　selectedCallback (Callback)
　　　　　　　　項目を選択した際のコールバック関数

サンプル

<select id="fruits">
<option value="apple">りんご</option>
<option value="orange">みかん</option>
<option value="banana">バナナ</option>
<option value="strawberry">いちご</option>
<option value="kiwi">キウイ</option>
<option value="cherry">さくらんぼ</option>
<option value="grape">ぶどう</option>
<option value="each">もも</option>
</select>

$('#fruits').vSelect();

<select id="ref" style="width: 200px;margin-top: 20px;">
   <option></option>
   <option value="01">北海道</option>
   <option value="02">青森</option>
   <option value="03">岩手</option>
   <option value="04">宮城</option>
   <option value="05">秋田</option>
   <option value="06">山形</option>
（中略）
  </select>

$('#pref').vSelect({
  addSelectFunc: function() {
    console.log([ 'addSelectFunc', this ]);
    return true;
  }
});

<select id="callback" style="width: 200px;margin-top: 20px;">
   <option value="spring"春></option>
   <option value="summer"夏></option>
   <option value="autumn"秋></option>
   <option value="winter"冬></option>
  </select>

$('#callback').vSelect({
  selectedCallback: function() {
    return(function() {
      alert( $(this).text() + "\n" + $(this).attr('data-value') );
    });
  }
});

<select class="multi">
  <option value=""></option>
  <option value="1">いちがつ</option>
  <option value="2">にがつ</option>
（中略）
 </select>　～ <select class="multi">
  <option value=""></option>
  <option value="1">1月</option>
  <option value="2">2月</option>
（中略）
 </select>

$('select.multi').vSelect();