javascript - 优雅的 jquery 搜索栏？

Question

我在页面顶部有一个搜索栏的页面上有一个帖子列表。当用户点击回车时，有没有办法获取搜索栏的内容？

我不想提交表单，但我想在不离开页面的情况下获取搜索栏的内容。我想我可以使用该字段的内容来获取该字段的内容，$("#txt_name").attr('value');但是有没有一种方法可以在用户在搜索框中按 Enter 键时获取该值？

然后根据他们搜索的内容，我可以检查<div>id 并查看它们是否匹配。如果它们不匹配，则将它们淡出...

Answer 1

您可以将事件处理函数附加到您的输入元素

var $search = $("#txt_name").on('keyup', function (e) {
  if (e.keyCode == 13) {
    alert($search.val());
  }
}) 

Answer 2

这样的事情应该会有所帮助：

http://jsfiddle.net/Batfan/vWMXm/

这会侦听要在输入字段上按下的 [enter] 键，并根据元素是否包含与查询匹配的文本来隐藏/显示元素。所有结果都显示在空白搜索中。见下文：

$(document).on("keypress","#searchbox",function(e){
    var userVal = $(this).val();
    if(e.which == 13) {
      $( "li" ).each(function() {
          if($(this).text().match(new RegExp(userVal, "i"))) {
              $(this).show();
          } else if(userVal == "") {
               $(this).show();   
          } else {
               $(this).hide();   
          }
       });
    }
    e.stopPropagation();
});