HTML5 の データリスト（datalist）機能で、すべて表示しておく方法

Question

###実現したいこと
データリストでオートコンプリートを解除したいです。

つまりリストに「orange,banana」とあるとき、「b」を入力したら通常は「banana」のみ選択肢になりますが、そうではなく常に「orange,banana」の選択肢を表示したいということです。

###データリスト例

<input list="values" value="apple"/>
<datalist id="values">
  <option value="orange">
  <option value="banana">
</datalist>

###サンプルコード
この挙動でどうかなと思いましたが、ビミョーです。

まぁ消すのは仕方ないとして、以下ステップ5で、orangeしか選択肢が表示されない点あたりが特にビミョーです。
このステップ5でもすべて表示したいのですが、難しく質問とさせて頂きました。（ダブルクリックすればすべて表示できますが…）

1.ボックスクリック
2.リスト表示
3.orangeを選択
4.orangeが表示
5.もう一度ボックスクリック

$('input').on('click', function() {
  $(this).val('');
});
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val('apple');
  }
});

最終的には「セレクトボックスの機能をもたせつつ、入力もできるようにしたい」ということなので、データリストを使わなくてもできるよりよい方法があればいいとも思っています。宜しくお願い致します。

Comments

[kuma_kuma_]

> データリストでオートコンプリートを解除したいです。
そうなるとふつうのテキストボックスで実装になりますが
なぜ「b」で”orange”が選ばれる？