塩焼きブログ

塩焼きに関しての研究内容を公開しています

HTML5のautocomplete機能でキーワード候補を表示

以下だけでキーワード候補が出るinputが作れる

<input type="text" name="hoge" autocomplete="on" list="hoge">
<datalist id="hoge">
  <option value="カレー">
  <option value="寿司">
  <option value="dark">
  <option value="wing">
  <option value="力">
</datalist>

右側にプルダウン的なものが出てくるんでクリックすると全部表示

f:id:hoge:20150509170633p:plain

一文字入れるとそれに先頭がマッチするキーワードが出てくる

f:id:hoge:20150509170709p:plain

日本語でもいけるぞ

f:id:hoge:20150509170733p:plain

ひらがなとカタカナの微妙なのはいけない

f:id:hoge:20150509170750p:plain

漢字でもいける

f:id:hoge:20150509170824p:plain

JSとかで候補書き換えれば現在の入力状態に適したものを動的に追加したり表示したりできるかもしれんが要検証だな。試してみた人がいたら教えてくれ。