This few lines of code suppose to work like a searching algorithm which also suggests keywords. Clicking on a keyword supposed to put the word into the input textbox. The words which can be results are the following: "first", "second".
这几行代码假设像搜索算法一样工作,它也建议使用关键字。单击应该将单词放入输入文本框的关键字。可以得到的结果如下:“第一”,“第二”。
The problem is that it doesn't work until the second click.
问题是它在第二次点击之前不起作用。
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>
2 个解决方案
#1
1
This happens when the <input>
looses focus and the change event is emitted, your code runs emptying the #list
but then immediately after on keyup
it repopulates it. You could use the input
event in place of change
and keyup
to workaround this:
当失去焦点并发出更改事件时,会发生这种情况,您的代码会清空#list,但在keyup之后立即重新填充它。您可以使用输入事件代替更改和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>
#2
0
This is because the input has focus when typing, the first click makes the input lose focus. The second click actually fires the onClick(); The easiest solution I can think of is removing focus when the mouse enters the list. Here is a link to jQuery's mouseenter() function.
这是因为输入在输入时具有焦点,第一次单击使输入失去焦点。第二次点击实际上会触发onClick();我能想到的最简单的解决方案是在鼠标进入列表时移除焦点。这是jQuery的mouseenter()函数的链接。
#1
1
This happens when the <input>
looses focus and the change event is emitted, your code runs emptying the #list
but then immediately after on keyup
it repopulates it. You could use the input
event in place of change
and keyup
to workaround this:
当失去焦点并发出更改事件时,会发生这种情况,您的代码会清空#list,但在keyup之后立即重新填充它。您可以使用输入事件代替更改和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>
#2
0
This is because the input has focus when typing, the first click makes the input lose focus. The second click actually fires the onClick(); The easiest solution I can think of is removing focus when the mouse enters the list. Here is a link to jQuery's mouseenter() function.
这是因为输入在输入时具有焦点,第一次单击使输入失去焦点。第二次点击实际上会触发onClick();我能想到的最简单的解决方案是在鼠标进入列表时移除焦点。这是jQuery的mouseenter()函数的链接。