Javascript 如何在从输入下的数据列表中选择选项后立即触发函数？

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

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

当前方式仅在焦点从输入中移除后才起作用。我想要的是，在单击该选项之后，它将触发另一个函数，比如触发javascript函数

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

我尝试了“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>

A.
B
文件夹/删除
C

我的脚本如下

                            <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());}

函数getJsonRequest（i）{
$（“输入[name=endpointsname\ui+]”）。更改（函数（）{
警报（$（this.val（））；}

试试这个伴侣

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

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

---

我发现了一种很好的方法，只在从数据列表中选择一个选项时触发一个函数，而不影响手动输入–使用

keyup

事件，它在桌面和移动设备上都能完美地工作。选择数据列表选项时，事件侦听器会将其视为按下一个没有

keyCode

的键–事件对象只是缺少

keyCode

属性（我无意中注意到它，使用console.log检查keyup事件）。下面是一个可运行的代码示例，用于在选择数据列表选项后立即模糊输入并临时更改其背景色：

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

函数BlurinPuttonDalistChoice（e）{
if（！e.keyCode）{//或：if（e.keyCode===未定义）
e、 target.blur（）；
e、 setAttribute（'style'，'background color:yellow'）；
setTimeout（（）=>e.target.removeAttribute（'style'），1500）；
}
}

Demo

值更改时，即选择当前选项以外的其他选项时，将触发更改事件。