1

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());}
Michael Su
  • 23
  • 2
  • 5
  • 2
    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

2 Answers2

0

Try this mate

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

Fiddle

Nibin
  • 3,922
  • 2
  • 20
  • 38
0

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.

Roman Karagodin
  • 740
  • 2
  • 11
  • 16