Ajaxによる入力補完

Question

テキストボックスに文字列を入力すると、テキストボックスの下に、データベースの文字列と部分一致する文字列を表示したいです。

<input type="text" id="INPUT_ID" name="INPUT_NAME" list="A_LIST" value="前画面POST">
<datalist id="A_LIST"></datalist>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $("#INPUT_NAME").keyup(function(elm){
    $.ajax({
      type: "POST",
      url: ajaxurl,
      data: {"cond": $(elm.target).val()},
      success: function(result){
        $(elm.target).next().html(result);
      }
    });
  });
</script>

上記、Ajaxによるデータの受け渡しは成功し、ブラウザF12開発ツールで確認すると<datalist>内部にデータは表示されるのですが、ブラウザ上（GoogleChrome）では期待通りに表示されません。
<datalist>は以下の通り変わります

<datalist id="A_LIST">
  <option value="アクア"></option>
  <option value="アクセラ"></option>
  <option value="アクセラスポーツ"></option>
  <option value="アクティトラック"></option>
  <option value="アクティバン"></option>
  <option value="カローラアクシオ"></option>0
</datalist>

諸般事情で"1.9.1/jquery.min.js"以外使用できないのですが、ただdatalistに要素を追加するだけでは、入力保管リストの動的変更はできないのでしょうか。

よろしくお願いいたします。

---

追記

上記での実装を諦めて、<input>の下に<select>を動的に表示することで代替実装したしました。
とはいえ、HTML5としては本来できるであろう（と私は思ってる）内容で、質問としては可決していないので続行させてください。

Answer 1

html が 下記のようになっていれば、出力できると思います。
<datalist id="A_LIST">

<option value="アクア">アクア</option> <option value="アクセラ">アクセラ</option> <option value="アクセラスポーツ">アクセラスポーツ</option> <option value="アクティトラック">アクティトラック</option> <option value="アクティバン">アクティバン</option> <option value="カローラアクシオ">カローラアクシオ</option>0 </datalist>

Comments

[退会済みユーザー]

ご回答ありがとうございます、上記になるように修正いたしましたが出力はできませんでした。

[退会済みユーザー]

あーすいません。HTML５なんですね。　datalist を見落としました
<input type="text" id="INPUT_ID" name="INPUT_NAME" list="A_LIST" value="前画面POST">

value="前画面POST"を　削除してください