htmlフォームのinput入力時の予測変換を非表示にしたい

Question

Webページのフォームを作成中です。

inputとdatalistを利用して、候補から選択できる仕組みを考えていますが、IMEがONの状態だと、予測変換が表示されていしまうため、せっかくのdatalistの絞り込みが見えなくなってしまいます。

Google Chromeの検索フォームやURL欄等、予測変換が表示されないエリアがあるので、通常のWeb実装でもできるのかなと思っているのですが、通常できるものでしょうか。

いろいろ調べても、通常のIMEの設定から予測変換をOFFにする方法のみが出てきて、Webの特定フォームでのみOFFにする方法を見つけることができませんでした。

動作環境としては、
・Windows10
・Google Chrome 最新
としたいです。

input、datalistのイメージになります。（まだ、よくあるサンプルの状態です）

<input type="text" name="name" id="sampleText" list="sample">
<datalist id="sample">
<option value="サンプル1">
<option value="サンプル2">
<option value="サンプル3">
</datalist>

Answer 1

<input type="text" name="name" id="sampleText" autocomplete="off" list="sample">

ではいかがでしょうか？

Comments

[norita]

回答ありがとうございます。

「autocomplete」の設定で、datalistに勝手に値が追加されることの回避はできましたが、IMEが表示する予測変換を消すことはできませんでした。。

Answer 2

Chromeの検索部分を参考にしてみました。

<input type="search" results="0" name="name" id="sampleText" list="sample">

Comments

[norita]

うまくいっている処理のソースを見ること忘れていました。。ありがとうございます。

typeを「search」にすることで、対応できました。
「search」にしたら、普通の「text」と画面イメージ変わってしまいましたが、CSSでの対応ができたので、想定通りの動きができました。

ありがとうございます。