如何在输入下从数据列表中选择一个选项后立即触发功能？答案

【问题标题】：how to trigger function right after select a option from datalist under a input?如何在输入下从数据列表中选择一个选项后立即触发功能？
【发布时间】：2015-03-18 09:29:08
【问题描述】：

例如，我有以下输入和数据列表。从下拉列表中选择选项“a”后，如何触发函数？

当前的方式只有在焦点从输入中移除后才有效。我想要的是，点击选项后，它会触发另一个功能，比如触发javascript功能？

我试过“onchange”和“onclick”，它必须移除焦点。我希望在选择选项后触发操作。

                            <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>

我的脚本如下。

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

【问题讨论】：

当值更改时，更改事件会触发，即选择比当前的另一个选项。 span>

标签： javascript jquery

【解决方案1】：

试试这个朋友

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

Fiddle

【讨论】：

【解决方案2】：

我找到了一种很好的方法来触发一个函数，它专门从数据列表中选择一个选项而不影响手动输入——使用keyup 事件，它在桌面和移动设备上都能完美运行。 选择 datalist 选项时，事件侦听器将其视为没有keyCode 的按键 – 事件对象只是缺少keyCode 属性（我无意中注意到它，使用控制台检查 keyup 事件。日志）。下面是一个可运行的代码示例，用于在选择数据列表选项后立即模糊输入并临时更改其背景颜色：

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：也可以通过以下方式检测数据列表选择：在这种情况下生成的事件只是Event 的一个实例，而不是KeyboardEvent 的一个实例，就像按下真实键的情况一样。因此，替代检查是：if (!(e instanceof KeyboardEvent)) { }。

此外，有可能为此目的不是监听keyup 事件，而是监听input 事件：在这种情况下，来自dataList 的选择也将触发不是InputEvent 实例的“异常”事件和此外，与典型的输入事件不同，它缺少 inputType 属性。

【讨论】：