どのように私はJavaスクリプトのEnterキーでボタンをトリガーするのですか？/テキストボックスと検索ボタンにIDを与える方法は？

Question

申し訳ありませんが、私はこの質問が以前に尋ねられ、答えられていることを知っていますが、私は自分のコードに実装することはできません。非常にプログラミングに慣れておらず、かなり苦労しています。 私は検索バーと検索ボタンがあります。私がしようとしているのは、物理的に検索ボタンをクリックして私が望むものを検索しなければならないのではなく、検索することができるエンターキーをクリックできるようにすることです。検索バーとボタンのコードは次のとおりです。 簡単なもの。

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

ですから、検索ボタンをクリックした瞬間にそれは私が持っているjavascript関数アクティブになります。今度はあなたが望む結果を見つけるでしょう

function searchresult() { 
    //find the result 
} 

を。致命的なもの。 javascript関数の中にあるコードはこの質問には必要なく、かなり長いです。

基本的には、検索ボタンと同じように、検索結果のJavaScript機能を有効にするにはEnterキーが必要です。 jQuery keypress（）メソッドを使用してこれを行うことができます。

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

私はHTMLで使用されているid属性を認識しています：そしてここで私は疑問に思って何をするのに使用することができますが、私はちょうど私が持っているものにそれを実装する方法がわからないコードがありますコーディングも同様ですが、どのように正しく検索ボタンとテキストボックスにidを割り当てるのかわかりません。それぞれのコードで使うことができます。検索も同様です。

誰かが私の質問を解決するために見つけたjQueryコードをどのように使うことができるかを私に見せてくれれば華麗です。どのように私はそれについて行くかについての他の提案に完全に開きます。 皆さんありがとうございました！

あなたの検索ボタンにIDを割り当てることができます

Answer 1

次のコード（以下の説明）を使用してください：これは何が行うことは、それがID searchとwhenverそれがkeyupを受け取ると、入力ボックスにイベントをフックしますです

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

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

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

を（キーリリース）イベントの場合は、Enterキーかどうかを確認し、その場合はidsearchButtonというボタンのclickイベントを発生させます（例としてそのIDを追加しました）。検索ボタンのclickイベントはsearchResult()関数に連結されています。

jQueryでのイベント処理の詳細については、jQuery's Handling Events pageを参照してください。

Answer 2

：

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

Answer 3

$('#search").change(function() { 
    searchResult(); 
}); 

ドン」：

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

が次にあなたがjQuery#trigger

JSを使用してボタンをクリックしてアクションをトリガすることができます"入力"キーを探しても気にしないでください。入力値が変更されるのを監視するだけです（Enterキーを押すか、フィールドをぼかすときに起こります）。

Answer 4

本当にフォームを使用することを検討する必要があります。

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 
 
    }); 
 
});

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

それともここで純粋な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);

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

Answer 5

あなたはformを使用することができますし、キー入力して提出したいので、それはonsubmitイベントですクリックすると同じことができます。

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

しかしevent.preventDefault()またはreturn falseを使用することを忘れないでください。