how to trigger function right after select a option from datalist under a input?

Question

For example, I have the following input and datalist. After select option "a" from dropdown list, how to trigger a function?

The current way is only working after the focus is removed from input. What I want is, right after click the option, then it will trigger another function,Like trigger the javascript function?

I tried "onchange" and "onclick", it has to remove the focus. I want the action being triggered after option is selected.

                            <input id="endpointsInput_1" name="endpointsname_1" list="endpointsname_1" class="form-control" type="text" style="display:inline-block;width:100%;" onclick="getJsonRequest(1);"/>
                            <datalist id="endpointsname_1">
                                    <option value="a">a</option>
                                    <option value="b">b</option>
                                    <option value="folders/delete">folders/delete</option>
                                    <option value="c">c</option>
                            </datalist>

my script is as below.

<script type="text/javascript">
     function getJsonRequest(i){
        $("input[name=endpointsname_"+i+"]").change(function () {
            alert($(this).val());}

The change event fires when the value changes, i.e. when another option than the current one is selected. — adeneo, Jan 20 '15 at 08:19

Nibin · Accepted Answer · 2015-01-20T08:35:48.023

0

Try this mate

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

Fiddle

edited Jan 20 '15 at 08:35

answered Jan 20 '15 at 08:29

Nibin

3,922
2
20
38

Roman Karagodin · Answer 2 · 2021-02-02T21:27:43.233

I found a nice way to trigger a function exclusively on choosing an option from a datalist and not affecting manual input – using a keyup event, and it works flawlessly on both desktop and mobile devices. When a datalist option is chosen, the event listener sees it as pressing a key without a keyCode – the event object simply lacks the keyCode property (I noticed it accidentally, checking keyup events with console.log). Below is a runnable example of code to blur an input and temporarily change its background color right after selecting a datalist option:

function blurInputOnDatalistChoice(e) {
  if (!e.keyCode) { // OR: if (e.keyCode === undefined)
    e.target.blur();
    e.target.setAttribute('style', 'background-color:yellow');
    setTimeout(() => e.target.removeAttribute('style'), 1500);
  }
}

<h1>Demo</h1>
<input onkeyup="blurInputOnDatalistChoice(event)" list="cars"></input>
<datalist id="cars">
  <option value="Audi">
  <option value="BMW">
  <option value="Volkswagen">
</datalist>

UPD: Datalist choices can also be detected the following way: the event that is generated in this case is just an instance of Event, but NOT of KeyboardEvent, as in case of pressing real keys. So, the alternative check is: if (!(e instanceof KeyboardEvent)) { }.

Also, there is a possibility to listen for this purpose not to keyup events, but to input events: in this case choices from dataList will also trigger "unusual" events that are not instances of InputEvent and also, unlike typical input events, lack the inputType property.

how to trigger function right after select a option from datalist under a input?

2 Answers2

Linked