入力内容を推測して候補を表示するJavaScript「jQuery Simple Filter」

フォームで項目を入力させるとき、県名など決まりきったものであれば、1文字目の入力で候補を挙げることがユーザビリティ上、好ましいです。
jQueryプラグインjQuery Simple Filterを利用するとJavaScriptを利用して簡単に作成できます。

使用方法

jQuery Simple Filterからjquery.simpleFilter-0.5.js、jquery.quicksilver.jsを、jQueryからjquery.jsをダウロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.quicksilver.js"></script>
<script type="text/javascript" src="jquery.simpleFilter-0.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#id名').simpleFilter({
    data: array, //下記と揃えてください
    maxListEntries: 5 //表示する最大数です
  }).focus();
  
});

//ここから表示させたい項目名を記述
var array = ['Alabama',
              'Alaska',
              'Arizona',
              'Hawaii',
              'Idaho',
              'Illinois',
              'Wyoming'];
</script>

あとは上記で振ったidを付与すれば完成です。
<input type="text" id="id名" />

サンプル

US State:

Javascriptサンプルページ一覧

skuare.net