htmlのinputに履歴でなく独自の値を候補として表示する：datalistとautocomplete="off"をうまく組み合わせる

html の input type="text" に datalist を使うときは、下のように option を設定します。

<input type="text" list="words" autocomplete="off">
<datalist id="words">
    <option value="あ">
    <option value="い">
</datalist>

ポイント：

• input の list に datalist の id 名をセットする
• datalist に option をいくつか入れる
• option の値は value にセットする
• autocomplete="off" で過去の履歴を表示しない

上のコードでは input にフォーカスを当てたときに、履歴でなく datalist で設定したものが候補として表示されます。