datalistを利用したコンボボックスの選択

Question

datalistタグを利用して入力できるコンボを作ったのですが、
絞り込みができるおかげか、コンボから選んだあと、▼を押すと、選択リストは選んだものだけになってしまいます。
これを、絞り込みできる機能はそのままで、リストから選んだ後のリストは全て出て欲しいのですが
どうやってやったら良いでしょうか？

<input type="text" list="lists" id="selectCode"/>
<datalist id="lists">
<option data-value="">001｜AAAA</option>
<option data-value="">999｜その他</option>
</detalist>

onfocusとかで、選択しようとしたときに選ばれていた内容を消せば出来るのですが
それだと選ばなかった場合に、選んでいた情報が消えてしまいます。

宜しくお願いします。

$('input').focus(function() {
   var obj = '#'+$(this).attr('list');
   $('#'+$(this).attr('list')+" option").prop('disabled',function(){
      $(obj).append("<option data-value=" + $(this).val() + ">" + $(this).val() + "</option>");
    });
});

色々調べ、フォーカス時にdatalistの中身を書き換えるように試してみたのですが
選択した内容が２重にリストに追加されるだけでした。
$(this).val()を確認すると、全リスト内容が取れるようなので、disabled状態を解除できれば良いのでしょうか？
書き方がわかりません。。。。

Comments

[x_x]

「絞り込みできる機能はそのまま」、「リストは全て出て欲しい」が相反することだと気づいているでしょうか？
わたしにはどうなってほしいのかわかりません。

[mi37]

選びやすいように候補から絞って選択後、別の候補に変えたい時に候補がない状態となるのを改善したいです。

[x_x]

「絞り込みたいとき」と「すべて出したいとき」との操作が同じなら判別できません

[mi37]

コンボが選ばれている状態を条件とするか、フォーカスが入った時等を条件に含めれば実現できそうな気がするのですが。

Answer 1

datalistタグを利用して入力できるコンボを作ったのですが、
絞り込みができるおかげか、コンボから選んだあと、▼を押すと、選択リストは選んだものだけになってしまいます。

キー入力で選択肢を絞り込んだ後に一つの選択肢を選んだなら、その選択肢が入力されます。
[▼] で再び選択し直そうとしたなら、一つの選択肢しか出現しないのは当然の事で、選択肢を選ぶ前の候補が現れるのは直感に反する挙動だと思います。

代案としては、キーボード入力と選択肢を別々に用意する方法が考えられます。
(例: キーボード入力用のinput要素とselect,option要素を用意し、キー入力に応じて、option要素のdisplay値/disabled値をJavsScriptで変更して選択肢を制御する)

Te: mi37 さん

Answer 2

onfocusで入力文字列を保存しておいて、onblurで何も入力されていなかったら保存されている文字列を設定すればよいのではないでしょうか？