キーボード入力検索機能のjQuery実装を詳しく解説

この記事では、キーボード入力検索機能を実装するための jquery を主に紹介します。フロントエンド コードと検索ボタンの実装コードを掲載します。

もともと、私は検索でそれほど難しいことはないといつも思っていましたが、ボタンを使用せずに検索を実装する最後のプロジェクトを受け取ってから、すぐにインターネットでこのテクノロジーを探し始めました。 , 参考のためにここに投稿されたソースコードを共有します。

フロントエンドコード

<p class="fl search-box"> 
     <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</button>
     <input id="sousuo" name="sousuo" type="search" placeholder="输入搜索内容" value="">
</p>

検索ボタンの実装

$(function () {
   $("body").on("click", "#btnSubmit", function () {
    var sousuo = $("#sousuo").val();
    if (sousuo == "") { alert("请输入信息"); return false; }
    location.href = "{$:CSSiteUrl}search.html?keywords=" + escape(sousuo);
   });
  });

以下が今回のハイライトです、キーボードのEnterを押して検索を実装します

$('#sousuo').bind('keypress', function (event) { 
   if (event.keyCode == "13") { 
    $("#btnSubmit").click();
   }
  })

多分見つかるかもしれませんこれは実際にはキーボードの 13 番目のキー コードである Enter キーと同等であるため、将来他のキーを実装したい場合は、キーボード上の対応するキー コードをクエリするだけです。 event.keyCode == “13”

概要

関連する推奨事項:

データを送信するための入力、送信、ボタンとEnterキーの違いの分析例

Enterと改行の違いを比較

jquery同じファイル内に 2 つのキー押下があり、Enter キーを押すと両方のキーがトリガーされます

以上がキーボード入力検索機能のjQuery実装を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。