datalistを常に全件表示したい。

Question

datalistを指定したテキストボックスは、入力値と部分一致しているものが、入力候補に表示されます。
これを常に全件表示させる方法はないでしょうか？

入力できるプルダウンを実現したいと思っています。

ブラウザはGoogleChromeのVer78.0です。

Answer 1

自己解決しました。
value値セットのまま、datalist全件表示する方法はわからずじまいでしたので、valueを空にして、見た目は'placeholder'に任せることにしました。

    var changeflg = false;
    $(document).on('focus','input[type=text].txt_datalist',function(event){

        changeflg = false;
        
        // Store the current value on focus and on change
        $(this).attr('placeholder',$(this).val()); 
        
        // datalistを全件表示させるために、一度空にする。見た目はplaceholderでカバーする。
        $(this).val('');
    });
    
    $(document).on('focusout','input[type=text].txt_datalist',function(event){
        
        // 変更無しの場合は、placeholderの中身を反映する
        if(!changeflg){
            $(this).val($(this).attr('placeholder'));
        }
        
        $(this).attr('placeholder','');
        
        changeflg = false;
    });
    
    $(document).on('change keyup','input[type=text].txt_datalist',function(e){

        // テキストの内容が変更された、もしくはキーボードの削除ボタンバックスペースキーで削除した。
        if (e.type == 'change' || e.keyCode === 46 || e.keyCode === 8){
            // 後処理へ。
        } else {
            // 他のキーが押されたときは、keyupではなく、changeイベントに任せる。
            return;
        }

        changeflg = true;

        // これ以降に、書き換えによる処理を書く

    });