单击事件侦听器仅在第二次工作

Question

这几行代码假设像搜索算法一样工作，它也建议关键字。 单击应该将单词放入输入文本框的关键字。 可以作为结果的词如下：“第一”、“第二”。

问题是它直到第二次点击才起作用。

 var database = ["first", "second"]; var founded = true; $( '#list' ).on( 'click', '.list_elem', function() { $("#box").val(this.textContent); $("#list").empty(); }); $("#box").on("change paste keyup", function() { $("#list").empty(); var inputText = $(this).val(); if (inputText.length != 0) { for (var i = 0; i < database.length; i++) { founded = true; for (var j = 0; j < inputText.length; j++) { if(!(database[i][j].toLowerCase() == inputText[j].toLowerCase())) { founded = false; } } if(founded) { $( "#list" ).append('<div class="list_elem">' + database[i] + '</div>'); } } } });

 <input type="text" id="box"> <div id="list"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

当<input>失去焦点并发出更改事件时，会发生这种情况，您的代码运行时会清空#list但在keyup后立即重新填充它。 您可以使用input事件代替change和keyup来解决此问题：

$("#box").on("input paste", function() { ...

 var database = ["first", "second"]; var founded = true; $('#list').on('click', '.list_elem', function() { $("#box").val(this.textContent); $("#list").empty(); }); $("#box").on("input paste", function() { $("#list").empty(); var inputText = $(this).val(); if (inputText.length != 0) { for (var i = 0; i < database.length; i++) { founded = true; for (var j = 0; j < inputText.length; j++) { if (!(database[i][j].toLowerCase() == inputText[j].toLowerCase())) { founded = false; } } if (founded) { $("#list").append('<div class="list_elem">' + database[i] + '</div>'); } } } });

 <input type="text" id="box"> <div id="list"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 2

这是因为输入时输入有焦点，第一次点击会使输入失去焦点。 第二次点击实际上触发了 onClick(); 我能想到的最简单的解决方案是在鼠标进入列表时移除焦点。 这是 jQuery 的 mouseenter() 函数的链接。