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

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

本文关键字：选项 一个 功能 输入 数据 选择 列表      更新时间：2023-09-26

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

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

我试过"onchange"answers"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());}

试试这个伙伴

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

Fiddle

我发现了一种很好的方法，可以只在从数据列表中选择一个选项时触发函数，而不影响手动输入——使用keyup事件，它在桌面和移动设备上都能完美工作当选择数据列表选项时，事件监听器会将其视为按下了一个没有keyCode的键——事件对象只是缺少keyCode属性(我在使用console.log检查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属性。

相关文章：