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

Question

例如，我有以下输入和数据列表。 从下拉列表中选择选项“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());}

Answer 1

试试这个伙伴

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

小提琴

Answer 2

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

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

此外，还有听为此目的而不是一个可能性keyup事件，而是要input的事件：在这种情况下，从DataList的选择也将引发“不寻常”的事件不在的情况下InputEvent ，也不像典型的输入事件，缺乏inputType属性。