Good day. Faced such a problem. I have an input field with a datalist list. I need that when I click on an item from a datalist , an event happens. The same alert , at least. $().change works when the field is out of focus, but you need it to immediately when you click. Is it possible?

 <input type="text" id="test_input" list="temp_list"> <datalist id="temp_list"> <option value="1"> first </option> <option value="2"> second </option> <option value="3"> third </option> </datalist>
  • one
    click ? - hindmost
  • I tried to hang all sorts of event handlers on the datalist and on the option. And none of them worked (.click among those. If you click on input, it is called when you click directly on the input field, and the datalist is displayed below and therefore click on input does not work ( - Valentin Karpov

1 answer 1

The input event is triggered right there when the value of the text element changes and is supported by all browsers except IE8-.

 $('#test_input').on('input', function() { console.log($(this).val()); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="test_input" list="temp_list"> <datalist id="temp_list"> <option value="1"> first </option> <option value="2"> second </option> <option value="3"> third </option> </datalist>

  • Thank. Is there no other option? Just in my program, when filling out this field, an ajax request is executed. And with .on ('input'), whenever you press the keyboard, this request is executed. If there is an option that only when you click on an item from the list, I would be very grateful. For I myself could not find how to do it and knowledge is not enough ( - Valentin Karpov