这几行代码假设像一个搜索算法一样工作,它也建议关键字。单击应该将单词放入输入文本框中的关键字。可以作为结果的词有:"first", "second"。
问题是它在第二次单击之前不起作用。
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>
最佳答案
这发生在 <input>
失去焦点并发出 change 事件,您的代码将运行清空 #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>
关于javascript - 单击事件监听器仅在第二次工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47972324/