如果点击输入按钮，返回搜索结果

Question

如果按下输入按钮，我一直在努力尝试触发按钮。我试过触发器（）和点击（），没有运气。我无法弄清楚为什么它不会执行，并且用鼠标点击时搜索按钮可以正常工作，但当按下回车按钮时不能正常工作。

$(document).ready(function() { 
 

 
    //alert("this"); 
 
    //$('#btnsearch').trigger('click'); 
 

 
$("#txtsearch").keyup(function(event){ 
 
    if(event.keyCode == 13){ 
 
     $("#btnsearch").click(); 
 
    } 
 
}); 
 
    $('#btnsearch').click(function(event) { 
 
     var searchText = $('#txtsearch').val(); 
 
     $.ajax({ 
 

 
      url: domain + "", 
 
      type: "GET", 
 
      headers: { 
 
       Accept: "application/json;odata=verbose" 
 
      }, 
 
      success: function(data) { 
 

 

 
       $.each(data.d.results, function(index, item) { 
 
       $('#tblResult tbody').append('<tr><td style="">' + '<a href = "' + item.Details + '">' + item.Title + '</td></tr>'); 
 

 

 
       } 
 

 
      )}; 
 

 
      event.preventDefault(); 
 

 

 

 
     }); 
 
    }); 
 
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form class="navbar-form navbar-right"> 
 
       <div id="" class="navbar-form navbar-right"> 
 
        <div class="input-group"> 
 
         <input id="txtsearch" type="text" class="form-control" placeholder="Search" /> 
 
         <div class="input-group-btn"> 
 
          <button id="btnsearch" class="btn btn-default" type="button"> 
 
           <i class="glyphicon glyphicon-search"></i> 
 
          </button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </form>

Answer 1

这是按事件处理程序输入：

$(document).keypress(function(e) { 
 
    if(e.which == 13) { 
 
     alert('You pressed enter!'); 
 
    } 
 
});

编辑： 你应该运行在一个函数的点击，所以你可以重用它为2场景（键盘和点击），如：

$(document).ready(function() { 
 

 
    //alert("this"); 
 
    //$('#btnsearch').trigger('click'); 
 

 
    function submitSearch(){ 
 
    var searchText = $('#txtsearch').val(); 
 
    $.ajax({ 
 
     url: domain + "", 
 
     type: "GET", 
 
     headers: { 
 
     Accept: "application/json;odata=verbose" 
 
     }, 
 
     success: function(data) { 
 
     $.each(data.d.results, function(index, item) { 
 
      $('#tblResult tbody').append('<tr><td style="">' + '<a href = "' + item.Details + '">' + item.Title + '</td></tr>'); 
 
     } 
 
    )}; 
 
    } 
 

 
    $('#btnsearch').click(function(event) { 
 
    submitSearch(); 
 
    event.preventDefault(); 
 
    }); 
 

 
    $(document).keyup(function(event){ 
 
     submitSearch(); 
 
    }); 
 

 
});

Answer 2

当你的input已经包含一个form元素中，你在默认情况下得到这个行为，所以keyup处理是多余的。

您遇到的更大问题是代码中出现几个语法错误，您可以在问题中运行代码段时在控制台中看到这些错误。

• 您已经在之前包含了Bootstrap jQuery。它是周围的其他方法
• 您对preventDefault()调用内部的$.ajax设置对象，造成一个语法错误
• 在$.ajax的success处理函数没有正确关闭。

当你解决这些问题，它工作正常。

$(function() { 
    $('.navbar-form').submit(function(e) { 
    e.preventDefault(); 
    var searchText = $('#txtsearch').val(); 

    $.ajax({ 
     url: domain, 
     type: "GET", 
     headers: { 
     Accept: "application/json;odata=verbose" 
     }, 
     success: function(data) { 
     $.each(data.d.results, function(index, item) { 
      $('#tblResult tbody').append('<tr><td><a href="' + item.Details + '">' + item.Title + '</td></tr>'); 
     }); 
     } 
    }); 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<form class="navbar-form navbar-right"> 
    <div id="" class="navbar-form navbar-right"> 
    <div class="input-group"> 
     <input id="txtsearch" type="text" class="form-control" placeholder="Search" /> 
     <div class="input-group-btn"> 
     <button id="btnsearch" class="btn btn-default" type="button"> 
      <i class="glyphicon glyphicon-search"></i> 
     </button> 
     </div> 
    </div> 
    </div> 
</form>