Question

我有一个搜索框，该搜索框应同时按下按钮和 Enter 键。他们都有相同的代码。该按钮可以正常工作，但是当涉及到 Enter 键时，大多数情况下它不起作用，有时却突然起作用。

这是我的代码：

$(document).ready(function() {

  function myFunction() {
    $("#search-criteria").keydown(function(event) {
      if (event.keyCode === 13) {
        var txt = $('#search-criteria').val();
        $('.items:contains("' + txt + '")').addClass('searched');
      }
    });
  }

  $('#search').click(function() {
    var txt = $('#search-criteria').val();
    $('.items:contains("' + txt + '")').addClass('searched');
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="search-criteria" onkeydown="myFunction()" name="search" placeholder="Search..">
  <input type="button" id="search" value="search" />
</form>

Answer 1

您正在将onKeyDown属性添加到HTML并附加了事件侦听器。因此，发生的事情是，当您按下键时，它会调用myFunction，它为keydown附加了第二个事件处理程序。可能会在第二次出现Enter键行为的同时，但是由于每个keydown都附加了一个新的事件侦听器，因此您可能会多次触发逻辑。

选择一种方法或另一种方法。要么使用HTML属性，要么以编程方式添加事件监听器，但不能同时添加两者。

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="search-criteria" name="search" placeholder="Search..">
  <input type="button" id="search" value="search" />
</form>

JS：

$(document).ready(function() {
  $("#search-criteria").keydown(function(event) {
    if (event.keyCode === 13) {
      doSearch();
      event.preventDefault();
    }
  });

  $('#search').click(function() {
    doSearch();
  });

  function doSearch() {
    var txt = $('#search-criteria').val();
    $('.items:contains("' + txt + '")').addClass('searched');
  }
});

（请注意，我还添加了.preventDefault()，以确保Enter键的默认行为不会出现，因为它可能会提交您的表单）

修改：

将重复的代码移至其自己的函数中。

Answer 2

删除不需要的内联事件onkeydown。
您需要在preventDefault函数中使用myFunction。

删除功能内部的类以清楚地查看新的搜索结果。

$(document).ready(function() {
  $("#search-criteria").keypress(function(event) {
    if (event.which === 13) {
      myFunction();
    }
  });

  //code for the button
  $('#search').click(myFunction);
});

var myFunction = function() {
  event.preventDefault();

  var txt = $('#search-criteria').val();

  $('.items').removeClass('searched');
  $('.items:contains("' + txt + '")').addClass('searched');
}

.searched {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" id="search-criteria" name="search" placeholder="Search..">
  <input type="button" id="search" value="search" />
</form>


<ul>
  <li class="items">Coffee</li>
  <li class="items">Tea</li>
  <li class="items">Milk</li>
  <li class="items">Coffee</li>
  <li class="items">Tea</li>
  <li class="items">Milk</li>
  <li class="items">Coffee</li>
  <li class="items">Tea</li>
  <li class="items">Milk</li>
</ul>

Answer 3

我对您发布的代码进行了一些小的更改，作为代码段，它对我来说效果很好。

我记录了代码本身的更改。

$(document).ready(function() {
  //code for Enter key
  function myFunction() {
    console.log("myFunction called");

    var txt = $('#search-criteria').val();
    $('.items:contains("' + txt + '")').addClass('searched');
  }

  $("#search-criteria").keydown(function(event) {
    if (event.keyCode === 13) {
      // Keep the ENTER key from submitting the form.
      event.preventDefault();
      myFunction();
    }
  });


  //code for the button
  $('#search').click(function() {
    var txt = $('#search-criteria').val();
    $('.items:contains("' + txt + '")').addClass('searched');

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<form>
  <!--
    the `onkeydown` on this can't work, since 'myfunction' isn't in the global space 
    so I removed it.
  -->

  <input type="text" id="search-criteria" name="search" placeholder="Search..">
  <input type="button" id="search" value="search" />
</form>

输入键功能有时有效，有时无效

3 个答案: