Question

这几行代码假设像搜索算法一样工作，它也建议使用关键字。单击应将该单词放入输入文本框的关键字。可以产生结果的词语如下：＆＃34; first＆＃34;，＆＃34; second＆＃34;。

问题是它在第二次点击之前不起作用。

＆＃13;

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

＆＃13;

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

＆＃13;

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（）; 我能想到的最简单的解决方案是在鼠标进入列表时移除焦点。 Here是jQuery的mouseenter（）函数的链接。

Click事件监听器仅在第二次工作

2 个答案: