入力補助に便利なdatalistをレガシーなWebブラウザでも実現「Autocomplete」
AutocompleteはHTML5のdatalistをレガシなーWebブラウザで実現します。Ajaxによるデータ取得もサポートしています。
HTML5の機能の一つにdatalistがあります。予め項目を指定しておくことで、テキストボックスの入力時に候補が表示できるようになります。そんな便利機能をレガシーなWebブラウザでも実現するのがAutocompleteです。
見た目は普通のテキストボックスです。
Aを入れると選択候補がリストアップされました。
矢印キーで候補を選択できます。
エンターを押して確定。
datalistで定義されています。
便利な点としてはHTML5の構造をそのまま使えるということでしょう。また、ソースデータを外部から引っ張ってくることも可能で、JSON/XMLでの定義ができます。二項目以上の入力はできないようですが、使いどころによっては便利そうです。
AutocompleteはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
datalistは便利な仕組みですが、予めHTML上に記述しておかないといけないのは大きな制約かも知れません。利用したいデータが膨大にあった場合、サーバサイドでデータを返す方が高速に処理できます。項目としては100以下の場合はdatalistが良さそうです。
入力補助の仕組みを使えば、無駄な入力を防げる他、入力ミスも減らせるはずです。予め入力内容が決まっている場合はドロップダウンを使う方法もありますが、項目が多いと選択肢から選ぶだけ疲れてしまいます。選択項目の量から最適な入力インタフェースを選びましょう。