入力もできるし選択もできるUIを作る（autocomplete、typeahead、コンボボックス）

Tweet

Category html5, JavaScript 2013/04/17

問題

ある入力欄で、一覧から選択もできるし、手入力もできるという操作ができるものを作りたいんだけど、簡単なのない？

答え

「なるべく足さない、なるべく作らない」の方針で対応してみます。

以下、Bootstrapがあるとき、jqueryuiがあるとき、HTML5でいいときの3案です。

対応例 1

もしtwitter Bootstrapを導入済みの環境ならば、typeaheadが使える。

demo

（スペースなど何か入力してみてください）

$('セレクタ').typeahead({
    source: ['個','本','枚','時間','日','ヶ月','人日','人月','ページ','台'],
    items: 10
});

オプションで動作が変更できるので、よくあるautocomplete以外の動きもできる。

入力に応じて選択肢が絞り込まれるのではなく、選択肢を全部表示したかったら以下のようにオプションを指定する。

$('セレクタ').typeahead({matcher:function(){return true;}});

inputのautocomplete属性は、”off”にしておくのがよさそう。

ただ、文字入力なしで「↓」キー押下のみで選択肢を表示する方法がわからなかった。日本語入力モードが絡んでいるときの動きもちょっと変な環境あり。

対応例 2

jqureyuiが使える環境なら、jqueryuiのautocompleteが使える。

demo

（文字入力でも↓キー押下でも動く）

$('セレクタ').autocomplete({
    source: ['個','本','枚','時間','日','ヶ月','人日','人月','ページ','台'],
    minLength: 0
});

動きは一番期待した感じに近い。

デザイン的に周りから浮いてしまうこともあるので、jqueryuiで統一している場合などでないと難しいかも。

対応例 3

HTML5のautocompleteとdatalistを使う。

demo

（IE以外で動作。IE10は大丈夫。↓キーなど押してみてください。）

<input type="text" autocomplete="on" list="test">

<datalist id="test">
    <option value="個">
    <option value="枚">
    <option value="本">
    <option value="パック">
    <option value="時間">
    <option value="日">
    <option value="ヶ月">
    <option value="人日">
    <option value="人月">
    <option value="ページ">
    <option value="台">
</datalist>

もともとあるautocomplete=”on”の動きに加えて、datalistで指定した候補をあらかじめ表示できる。

「↓」キー押下で候補が表示される。

ただ、IE9以前は対応していないようだ（IE10は大丈夫）。

autocompleteの操作の感じはなかなか快適。

環境を判別して、IEはtypeaheadにして、IE以外はautocompleteを使うのもよいと思う。