如果點擊輸入按鈕，返回搜索結果

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>