如何获取数据列表的更改事件？

Question

I am using a datalist and need to detect when the user selects something from the drop-down list. A similar question has been asked BUT I need it so that the event fires ONLY when the user selects something from the datalist. If they type something in the input then I do NOT want the event to fire. (Notice in the accepted answer to the question I linked that they bind the input, which is not what I want). I've tried (with no success):

<datalist>
    <option>Option 1 Here</option> 
    <option>Option 2 Here</option>
</datalist>


$(document).on('change', 'datalist', function(){
   alert('hi');
});

EDIT: This question is different than the suggested question because it's a completely different question.

Answer 1

You can manually check it on change. But you need to check change of the input of datalist.

$(document).on('change', 'input', function(){
    var options = $('datalist')[0].options;
    var val = $(this).val();
    for (var i=0;i<options.length;i++){
       if (options[i].value === val) {
          alert(val);
          break;
       }
    }
});

FIDDLE

Answer 2

Optimized Solution

$("input").on('input', function () {
    var inputValue = this.value;
    if($('datalist').find('option').filter(function(){
        return this.value == inputValue;        
    }).length) {
        //your code as per need
        alert(this.value);
    }
});

Answer 3

Please have look for your solution it's good to go. Have look for Demo

 $(document).on('change', 'input', function(){ var optionslist = $('datalist')[0].options; var value = $(this).val(); for (var x=0;x<optionslist.length;x++){ if (optionslist[x].value === value) { //Alert here value alert(value); break; } } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input list="data"> <datalist id="data"> <option value='1'>Option 1 Here</option> <option value='2'>Option 2 Here</option> </datalist>

Answer 4

In browser with the inputType property on the InputEvent you can use that to filter out any unwanted onInput events. This is "insertReplacementText" on Firefox 81 and null for Chrome/Edge 86. If you need to support IE11 you will need to validate the value is valid.

 document.getElementById("browser") .addEventListener("input", function(event){ if(event.inputType == "insertReplacementText" || event.inputType == null) { document.getElementById("output").textContent = event.target.value; event.target.value = ""; } })

 <label for="browser">Choose your browser from the list:</label> <input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <div id="output"> </div>

Answer 5

More Optimize

$("input").on('input', function () {
  if($('datalist').find('option[value="'+this.value+'"]')){
    //your code as per need
    alert(this.value);
  }
});

Answer 6

This might only be Chrome, untested anywhere else! , but I see a change event triggered when an option is selected. Normally change only happens in textfields when the field loses focus. The change event triggers before the blur event IF it's a normal non-datalist change, so we have to check both: we're looking for a change that's not immediately followed by a blur :

var timer;
el.addEventListener('change', function(e) {
    timer = setTimeout(function() {
        el.dispatchEvent(new CustomEvent('datalistchange'));
    }, 1);
});
el.addEventListener('blur', function(e) {
    clearTimeout(timer);
});

And then you can listen for the custom datalistchange event like normally. Or you can just put your specific logic instead of the dispatchEvent .

jsFiddle here

Answer 7

The solutions above all have a big problem. If the datalist has the option of (for example) "bob" and "bobby", as soon as someone types "bob", they code immediately says it's the same as clicking "bob"... but what if they were attempting to type "bobby"?

For a better solution, we need some more information. When listening for the 'input' event on the input field:

In Chromium-based browsers, when you type, delete, backspace, cut, paste, etc. in an input field, the event that is passed to the handler is an InputEvent , whereas when you select an option from the datalist, the event is just an Event type with a property of type that equals 'input'. (This is also true during an auto-fill, at least with BitWarden).

So you can listen for an 'input' event and check to see if it's an instance of InputEvent to determine if it's from autofill (which I think should be allowed since most of the time autofill won't be filling these types of fields, and if they do, it's usually a legit choice) / datalist selection.

In Firefox, it's different, though. It still provides an InputEvent , but it has an inputType property with the value of "insertReplacementText", which we can also use. Autofill does the same thing as Chromium browsers.

So here's a better solution:

$('#yourInput').on('input', function(){
    if (
        !(e instanceof InputEvent) ||
        e.inputType === 'insertReplacementText')
    ) {
        // determine if the value is in the datalist. If so, someone selected a value in the list!
    }
});

I wish the browsers had the same implementation that had an event type/property that was exclusive to datalist selection, but they don't so this is the best I've got. I haven't tested this on Safari (I don't have access or time right now) so you should probably take a look at it and see if it's the same or has other distinguishing differences.