如何在使用datalist的文本輸入上對按鍵和項目選擇執行操作？

Question

我確定有一個非常簡單的答案，我有一個文本輸入框綁定到datalist。我可以使用jquery爲每個鍵入的事件觸發一個事件（「change keyup」），但是我也想在從datalist下拉列表中選擇一個項目時觸發一個事件。

使用下面的代碼，我需要點擊該項目然後按下一個鍵來激活。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <datalist id="mydata"><option value="select1" /><option value="select2" /></datalist> 
 
    <input type="text" list="mydata" /> 
 
    </div> 
 
    <script> 
 
    $("#div1").delegate(":input", "change keyup", function (e) { 
 
    console.log('fired'); 
 
    }); 
 
    </script>

將項目選擇後觸發什麼事件呢？ Onclick似乎不是一個好的選擇，因爲它會在任何點擊時觸發。

Answer 1

您的情況最好的事件是使用input事件，而不是change或keyup事件。

$("#div1").delegate(":input", "input", function (e) { 
 
console.log('fired'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="div1"> 
 
<datalist id="mydata"><option value="select1" /><option value="select2" /></datalist> 
 
<input type="text" list="mydata" /> 
 
</div>