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

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

使用方法
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名" />
入力内容を推測して候補を表示するJavaScript「jQuery Simple Filter」サンプル

sponsors

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

記事作成:
記事URL:

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