选择项目或键入输入与列表中的项目匹配时 HTML5 数据列表的 jQuery 事件

Question

I have datalist like below -

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1"/>  
    <option value="Faizan2"/>   
</datalist>

What I want is, when an item is typed in completely(for example say in input box when user completely type "Adnan1") or selected from list, then I want an event. I tried couple of approaches but both doesn't help me so far. Approaches are -

$("#name").change(function(){
console.log("change");
}

problem with this is, the event only gets triggered when input gets out of focus Ie when I click somewhere in the screen.

I also tried

$("#name").bind('change', function () {
    console.log('changed'); 
});

but the callback gets triggered each time when I type in. I actually need to make an AJAX call when item is completely selected. Either via type-in or by selecting from dropdown.

First approach is bad for user perspective because he has to make extra click and second has disadvantage as for every letter an event will be triggered.

All I want is an event when either user made a selection or typed complete sentence. is there a way to achieve this? any event that I missing and that can solve my problem.

Answer 1

On modern browsers , you can use input event, eg:

 $("#name").on('input', function () { var val = this.value; if($('#allNames option').filter(function(){ return this.value.toUpperCase() === val.toUpperCase(); }).length) { //send ajax request alert(this.value); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input id="name" list="allNames" /> <datalist id="allNames"> <option value="Adnan1" /> <option value="Faizan2" /> </datalist>

PS: as input event has better support than datalist element, there is indeed no reason to not use it if you are already using datalist element.

Answer 2

You can use input event for achieving such functionality, as below :

 $(document).ready(function() { $('#name').on('input', function() { var userText = $(this).val(); $("#allNames").find("option").each(function() { if ($(this).val() == userText) { alert("Make Ajax call here."); } }) }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="name" list="allNames" /> <datalist id="allNames"> <option value="Adnan1" /> <option value="Faizan2" /> </datalist>

Answer 3

Simple solution

document.getElementById('name').addEventListener('input', function () {
   console.log('changed'); 
});

Answer 4

Check if this works for you :

var dataList=[];
$("#allNames").find("option").each(function(){dataList.push($(this).val())})
console.log(dataList);
$("#name").on("keyup focus blur change",function(){
    if(dataList.indexOf($(this).val())!=-1)
console.log("change");
})

I pushed datalist options into array , and on change event keyup , blur or focus , i check if input value exists in my datalist array.

Answer 5

Hacky as a sin, but works for me. (Note that if you are typing 'Rum-Cola' it doesn't stop on the 'Rum' option)

 const opts = $("option").map(function(){return this.value;}).get(); $("#favourite-drink").on("keydown", function(e){ if(e.key){ // in case of mouse event e.key is 'undefined' if (e.key === "Enter") { // looks like user wants to confirm the choice if(opts.indexOf(this.value) >= 0){ this.blur(); console.log("Selected: " + this.value); } } else { this.setAttribute("data-keyboardinput", "true"); // remember that it's keyboard event setTimeout(function(){ //and keep it in memory for 100ms this.removeAttribute("data-keyboardinput") }.bind(this), 100); } } }); $("#favourite-drink").on("input", function(){ if(!this.dataset.keyboardinput && opts.indexOf(this.value) >= 0){ // if it's not a key press followed event console.log("Selected: " + this.value); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Choose a drink:</p> <input id="favourite-drink" list="drinks"> <datalist id="drinks"> <option value="Rum"></option> <option value="Rum-Cola"></option> <option value="Vodka"></option> </datalist>

Answer 6

In addition to what was said above, we can also check the inputType of the input which must correspond to "insertReplacementText"

 function textThatComesFromADatalist (event){ const inputType = event.inputType; const isReplacingText = (typeof inputType === "undefined") || (inputType === "insertReplacementText"); return isReplacingText; } function onInput(event) { if(textThatComesFromADatalist(event)){ alert('selected: '+event.target.value); } }

 <input oninput="onInput(event)" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" /> <datalist id="ice-cream-flavors"> <option value="Chocolate"> <option value="Coconut"> <option value="Mint"> <option value="Strawberry"> <option value="Vanilla"> </datalist>

Answer 7

Simple solution is that check the input text value exist in datalist or not, and if it does, run an ajax request.

$("#input_form").on('input', function(event){
   if ($("#input_datalist option[value='" + $('#input_form').val() + "']").val() != undefined) {
      //send ajax request
   }
});