Suchergebnis zurückgeben, wenn die Eingabetaste geklickt wird

Question

Ich habe Schwierigkeiten gehabt, den Knopf auszulösen, wenn die Eingabetaste gedrückt wird. Ich habe trigger() versucht und klicke() und kein Glück. Ich kann nicht herausfinden, warum es nicht ausgeführt wird und die Suchschaltfläche funktioniert ordnungsgemäß, wenn Sie mit der Maus klicken, aber nicht, wenn eine Eingabetaste gedrückt wird.

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

Dies ist die Event-Handler zum Pressen eingeben:

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

Edit: Sie sollten Ihren Klick in einer Funktion ausgeführt werden, so dass Sie wieder verwenden können es für die 2 Szenarien (keyup und click) wie:

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

Als Ihr input bereits innerhalb eines form Element enthalten Sie dieses Verhalten standardmäßig erhalten, so dass die keyup Handler ist überflüssig.

Das größere Problem, das Sie haben, sind die verschiedenen Syntaxfehler in Ihrem Code, die Sie in der Konsole sehen können, wenn Sie das Snippet in Ihrer Frage ausführen.

• Sie haben Bootstrap vor jQuery enthalten. Es hat die andersrum
• Ihr Anruf zu preventDefault() sein, ist im Inneren der $.ajax Einstellungen Objekt und verursacht einen Syntaxfehler
• Die success-Handler-Funktion in $.ajax nicht richtig geschlossen ist.

Wenn Sie diese Probleme zu beheben es funktioniert gut.

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