オプションを開いたときにデータリスト入力をクリアするにはどうすればいいですか？

Question

私は関連するデータリストを持つhtml5入力を持っています。オプションを開いたときに入力をクリアして、それらのすべてを表示（フィルタなし）できるようにします。どうすればJavascriptでこれを行うことができますか？ （jQueryを使ってかない）

例えば（https://stackoverflow.com/a/29755076/2190425）

<input type="text" name="city" list="cityname"> 
<datalist id="cityname"> 
    <option value="Boston"> 
    <option value="Cambridge"> 
</datalist> 

私はドロップダウンの矢印をクリックすると、その後、ボストンを選択し、その後、再び、ドロップダウン矢印をクリックします - この2回目のクリックの後に私はへの入力をしたいです（ボストンに入力されているオプションにオプションをフィルタするので）空でなければならないので、何かイベントや何か入力が空になるようなものが必要ですが、何も入力されていないのでinputイベントにすることはできませんドロップダウンをクリックすると

Answer 1

単にダブルクリックで入力をきれいでした。この方法では、少なくともユーザーにオプションがあり、通知された場合、使用法は非常に快適です（新規ユーザーの場合、ソリューションの可能性は低くなります）。ここで

は、私が使用するコードです：

# datalist does not fire change event, therefore we need this exception, the if is for avoiding duplicate call with keyup 
$(@dom.search_fields).find('input.datalist_filter').on 'input', (e) => 
    @handleInput(e) if e.target.value.length and 
        ($(e.target.list).find('option').filter -> this.value == e.target.value).length 

# it does not fire event if you set the value of input manually, therefore we need to call handleInput directly here 
$(@dom.search_fields).find('input.datalist_filter').on 'dblclick', (e) => 
    e.target.value = '' 
    @handleInput(e) 

Answer 2

データリストとして機能する編集可能なドロップダウンを使用すると、要件が達成されます。下に示す編集可能なドロップダウンのコード。私が何をしたか

$(document).ready(function(){ 
 
    
 
    $(".editableBox").change(function(){   
 
     $(".timeTextBox").val($(".editableBox option:selected").html()); 
 
    }); 
 
});

.editableBox { 
 
    width: 75px; 
 
    height: 30px; 
 
} 
 

 
.timeTextBox { 
 
    width: 54px; 
 
    margin-left: -78px; 
 
    height: 25px; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <select class="editableBox">   
 
     <option value="1">01:00</option> 
 
     <option value="2">02:00</option> 
 
     <option value="3">03:00</option> 
 
     <option value="4">04:00</option> 
 
     <option value="5">05:00</option> 
 
     <option value="6">06:00</option> 
 
     <option value="7">07:00</option> 
 
     <option value="8">08:00</option> 
 
     <option value="9">09:00</option> 
 
     <option value="10">10:00</option> 
 
     <option value="11">11:00</option> 
 
     <option value="12">12:00</option> 
 
     <option value="13">13:00</option> 
 
     <option value="14">14:00</option> 
 
     <option value="15">15:00</option> 
 
     <option value="16">16:00</option> 
 
     <option value="17">17:00</option> 
 
     <option value="18">18:00</option> 
 
     <option value="19">19:00</option> 
 
     <option value="20">20:00</option> 
 
     <option value="21">21:00</option> 
 
     <option value="22">22:00</option> 
 
     <option value="23">23:00</option> 
 
     <option value="24">24:00</option> 
 
    </select> 
 
    <input class="timeTextBox" name="timebox" maxlength="5"/> 
 
</div>