wie kann ich die trigger eine Schaltfläche mit der enter-Taste in java-script?/ wie man text-Feld und durchsuchen-Schaltfläche eine ID?

Sorry, ich weiß, diese Frage wurde gestellt und beantwortet vor, aber ich kann nicht scheinen, um es zu implementieren, in meinem code. sehr neu in der Programmierung und kämpfen, ganz ein bisschen.
Ziemlich einfache Sachen hier habe ich eine search bar und ein suchen-button. Was ich versuche zu tun ist, anstatt physisch auf die suchen-Schaltfläche zu suchen, was ich will, ich würde gerne die Fähigkeit haben zu können, klicken Sie auf die enter-Taste, das könnten die Suche als gut. Hier ist der code für die suchen-Leiste und Knopf.
Einfachen Sachen.

<div class="ui-widget"> <!-- only for css purposes-->                   
<input id="search"> <!-- for the search box-->                  
<button type="button" onclick="searchresult()">Search</button> <!-- search button-->
</div>

So, in dem moment, wenn Sie klicken Sie auf die suchen-Taste aktivieren Sie die javascript-Funktion, die ich haben, die ist:

function searchresult() {   
  //find the result 
}

was wiederum das Ergebnis finden Sie wollen. tödliche Zeug.
Ich habe nicht enthalten die Codes, die innerhalb der javascript-Funktion, wie wir brauchen Sie nicht für diese Frage und seine sehr langwierig.

also im Grunde möchte ich die enter-Taste, um aktivieren zu können, die searchresult javascript-Funktion den gleichen Weg, den suchen-button nicht.
Ich bin mir bewusst, dass Sie verwenden können, jQuery keypress () - Methode, dies zu tun. und hier ist der code, der verwendet werden kann, zu tun, was ich mich Frage aber ich weiß einfach nicht, wie es zu implementieren, in dem, was ich habe: 

$("#id_of_textbox").keyup(function(event){
  if(event.keyCode == 13){
    $("#id_of_button").click();
  }
});

Ich bin mir bewusst, das id-Attribut, das in HTML-Codierung so gut, aber ich weiß nicht, wie ich gehen würde, über richtig zuweisen der such-button und ein Textfeld eine id, die ich dann verwenden könnte in dem code, den ich gerade oben haben, die dann wiederum würde mir erlauben, die enter-Taste, als Suche als gut.

Damit, wenn jemand könnte nur zeigen Sie mir, wie könnte ich die jQuery-code fand ich zur Lösung meiner Frage, das wäre genial. Völlig offen für andere Vorschläge, wie ich gehen würde, über Sie entweder.
Danke an alle für Eure Zeit und Aufmerksamkeit!

InformationsquelleAutor Cathal Brady | 2016-07-14
  1. 4

    Verwenden Sie den folgenden code (Erklärung weiter unten):

    JS:

    function searchresult() {
  console.log('searching');
  //find the result 
}

$("#search").keyup(function(event) {
  if (event.keyCode == 13) {
    $("#searchButton").click();
  }
});

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui-widget">
  <input id="search">
  <button type="button" id="searchButton" onclick="searchresult()">Search</button>
</div>

    Was dieser tut, ist es hook up ein Ereignis, auf das input Feld mit der id search und whenver es erhält eine keyup (key release) - Ereignis, wird es prüfen, ob es die Enter Schlüssel und, wenn ja, Feuer der click - Ereignis der Schaltfläche mit id searchButton (ich fügte hinzu, dass id als Beispiel). Ihre Suche Schaltfläche click Ereignis verknüpft ist die searchResult() - Funktion, die wiederum aufgerufen, die.

    Wenn du mehr Informationen benötigst, wie event-handling funktioniert in jQuery, check-out die jQuery-Handling Events-Seite.

    InformationsquelleAutor Angelos Chalaris
  2. 1

    Sollten Sie wirklich erwägen Sie die Verwendung einer form.

    JS:

    function search_function(search_terms){
  //Do your search action here
  alert(search_terms);
};
$(function(){
  $("#search").on("submit", function(e){
    search_function($("#search_terms").val());
    e.preventDefault(); //Prevents submitting in most browsers
    return false; //Prevents submitting in some other browsers
  });
});

    HTML:

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

    Oder hier ist ein Beispiel in reinem JS

    JS:

    function search_function(search_terms){
  //Do your search action here
  alert(search_terms);
};
document.addEventListener("DOMContentLoaded", function(){
  document.getElementById("search")
  .addEventListener("submit", function(e){
    search_function(document.getElementById("search_terms").value);
    e.preventDefault(); //Prevents submitting in most browsers
    return false; //Prevents submitting in some other browsers
  });
}, false);

    HTML:

    <form id='search'>
  <input type='text' id='search_terms' placeholder='Search' />
  <button>Search</button>
</form>

    InformationsquelleAutor Dustin Poissant
  3. 0

    Zuordnung der id zu Ihrer Suche button : 

    <button type="button" onclick="searchresult()" id="search_key">Search</button>

    Dann ausgelöst werden kann, die auf Aktion klicken Sie auf die Schaltfläche mit jQuery#trigger

    JS : 

    $("#id_of_textbox").keyup(function(event) {
    if (event.keyCode == 13) {
        $("#search_key").trigger('click');
    }
})
    InformationsquelleAutor RIYAJ KHAN
  4. 0
    $('#search").change(function() {
    searchResult();
});

    Nicht einmal die Mühe mit der Suche nach der "enter" - Taste; just watch für den input-Wert zu ändern (was passieren würde, nach drücken der enter-Taste oder Unschärfe dem Feld).

    InformationsquelleAutor VoteyDisciple
  5. 0

    Können Sie eine form und es ist onsubmit Ereignis, da möchte man key eingeben und submit klicken Sie auf, das gleiche zu tun. 

    <form action="" method="" onsubmit="searchresult(this);">
    <input type="text" name="query" />
    <input type="submit" value="Search" />
</form>

    Aber vergessen Sie nicht, verwenden event.preventDefault() oder return false.

    InformationsquelleAutor Taha Paksu
Schreibe einen Kommentar