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

小云云
リリース: 2017-12-31 16:01:46
オリジナル
2387 人が閲覧しました

この記事では、キーボード入力検索機能を実装するための 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を押して検索を実装します


$(&#39;#sousuo&#39;).bind(&#39;keypress&#39;, function (event) { 
   if (event.keyCode == "13") { 
    $("#btnSubmit").click();
   }
  })
ログイン後にコピー

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

概要

関連する推奨事項:


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

Enterと改行の違いを比較

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート