JavaScriptを使ってformのtextに入力候補を表示させる方法

Question

###前提・実現したいこと

JavaScriptでformのtextに特定の文字を入力すると、上の画像のように入力候補を表示させるプログラムを作成中です。

しかし、上記の画像のように「み」と入力しても何も表示されませんでした。

onkeyupを使いtextに入力された文字を取得して、その文字の種類（組み合わせ）によってdatalistのoptionを書き換えようとしたのですが、どの様にすればできますか？

selectでは、innerHTMLを使ってoptionを書き換えることができましたが、datalistでもできますか？

よろしくお願いします。

###該当のソースコード

<form name = "seeker">
 <input type="text" name = "name" list="example" autocomplete="off" onkeyup="sample();" >

  <datalist id="example">
    <option value = ""></option>
  </datalist>

  <input type="submit" value="検索">
</form>

<script>
function sample()
{
     var $sample1value = document.seeker.name.value;
     datalist_write($sample1value);
}

function datalist_write(word)
{
  if(word === "み")
  {
    document.getElementById('example').innerHTML = "<option value = \"三重\"></option>";
    document.getElementById('example').innerHTML = "<option value = \"宮城\"></option>";
    document.getElementById('example').innerHTML = "<option value = \"宮崎\"></option>";

  }
 else if(word === "みや")
  {
    document.getElementById('example').innerHTML = "<option value = \"宮城\"></option>";
    document.getElementById('example').innerHTML = "<option value = \"宮崎\"></option>";
 }
}
</script>

Comments

[kei344]

「が思うようにできません」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

Answer 1

条件分岐関係なしに以下の記述だけしてみて、何がおきているかを理解した方が良いです。

document.getElementById('example').innerHTML = "<option value = \"三重\"></option>";
   
// 以下の記述をコメントアウトしたりしてみる。
document.getElementById('example').innerHTML = "<option value = \"宮城\"></option>";

Answer 2

いろいろ問題がありますが、とりあえずあなたのコードの問題を指摘しておきます。

◎innerHTMLの部分
innerHTMLの部分は毎行代入しているので、毎行上書きされていて、最後の行しか有効にななりません。そのコードでやるなら最初の行はそのままで、2行目以降は….innerHTML += "…とすれば追記になります

◎datalistの使い方
datalistは入力された文字が含まれる候補を表示します。「み」が入力されたときに表示されるのは「み」が含まれるものだけです。「みやぎ」なら表示されますが「宮城」は表示されません。「宮城」がなんて読むかまでは自動的には考えてくれないからです

…と書きましたが、ひらがなを入力し漢字の候補を列挙するには、datalistを使った方法ではそもそも無理でしょう。以下のような方法を試すといいと思います。

twitter typeaheadはいろいろ改良されていた - Qiita