開発者として、Web サイトを開発するときに検索ボックスも不可欠な機能です。この記事では、Baidu の検索ボックスのような検索ボックスを作成する必要があります。 Baidu の検索バーに似た検索ボックス。
これは 2 つの機能を実現する必要があります:
1. キーワードを入力し、一致するドロップダウン リストを表示します
2. 一致する項目を選択し、関連するコンテンツを見つけます
この検索バーは一般的な電子メールでもよく使用されます。 -コマース Web サイト まず、分析機能を実装するには、キーワードを入力すると、一致するアイテムのリストがすぐに表示されます。この機能を実装するには、入力ボックスに「input」イベントをバインドし、非同期リクエストを送信する必要があります。ページ上にデータを表示するための背景。マウスまたは上下キーを使用して一致する項目を選択し、「検索」をクリックするか「Enter」キーを押して特定の結果を検索します。ここでは 2 つの非同期リクエストが使用されています。1 つ目は一致するアイテムをリクエストし、2 つ目は検索結果をリクエストします。キーボード、マウス、および入力ボックスのイベントを監視する必要があるため、同様のさまざまなニーズに適応することも考慮する必要があります。実装は次のように行われます。
1.html と css
<body> <div id="search-form"></div> </body> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;border:none;} body { font-family: "microsoft yahei" !important; background-color: #FDFFE0; } :focus { outline: none; } #search-form { position: relative; top: 50px; display: inline; } </style>
2. CSS ファイルと js ファイルをインポートします
ブログではファイルをアップロードできないため、私の git: http://git.oschina.net/manliu.com/search_frame にアクセスして、完全なプロジェクト ファイル
3. ページ参照 js
<script type="text/javascript"> var proposals = ['百度1', '百度2', '百度3', '百度4', '百度5', '百度6', '百度7','17素材网','百度','新浪']; $(document).ready(function(){ $('#search-form').complete({ searchIn:function(val){//传入输入值,返回匹配值 /* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/; return reg.test(val); */ var word = "^"+val+".*"; var rs = []; $.each(proposals,function(i,n){ if(n.match(word)){ rs.push(n); } }); return rs; }, width:400, height: 30, submitIn: function(text){//搜索选定的值 alert(text); } }); }); </script>
ここでは、一致する項目を返すために searchIn メソッドが使用され、データはバックグラウンドから取得され、複雑な場合は配列が返されます。ソース コードを変更する必要があります。submitIn は検索に使用されます。通常、一致する結果は非同期または同期で要求できます。
上記の内容は、Baidu のような検索ボックスを実装するためのクエリに関するチュートリアルです。皆様のお役に立てれば幸いです。
関連する推奨事項:
Js を使用して Baidu 検索ボックス プロンプト機能を実装する方法
Youku の模倣検索ボックスを実装するための JavaScript
以上がjqueryはBaiduに似た検索ボックスを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。