ホームページ > 記事 > ウェブフロントエンド > jquery_jquery に基づいて実装された Baidu 検索風の入力ボックスのオートコンプリート機能
jquery_jquery に基づいて実装された Baidu 検索風の入力ボックスのオートコンプリート機能
- WBOYオリジナル
- 2016-05-16 18:03:201266ブラウズ
早速、直感的に見てみましょう。
この機能の実装にはサーバーの協力が必要です。クライアントは、スクリプトを通じてサーバーから取得したデータを表示します。
まず、クライアントの HTML を確認します。
コードをコピーします コードは次のとおりです:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
;
サーバー側のコードについては、ここでは JSP を選択しますが、サーバー側は重要ではなく、データを送信することが重要です。
コードをコピー コードは次のとおりです:
<%@ page language="java " import= "java.util.*" pageEncoding="utf-8"%>
<%
String []words = {"amani","abc","apple","abstract" ,"an ","bike","byebye",
"beat","be","bing","come","cup","class","calendar","china"}; 🎜>if (request.getParameter("検索テキスト") != null) {
文字列キー = request.getParameter("検索テキスト")
if(key.length() != 0); {
String json="[";
for(int i = 0; i
json = " "" Words[i] """ ",";
}
}
json = json.substring(0,json.length()-1>0?json.length() -1: 1);
json = "]";
out.println(json);
}
% >
プロセス全体の概念は、実際には非常に明確です。まず、入力ボックスに keyup イベントを登録し、次にイベント内で ajax を介して json オブジェクトを取得します。データを取得したら、データごとに li タグを作成し、そのタグにクリックイベントを登録することで、各データをクリックしたときにイベントを応答できるようになります。キーボード ナビゲーションの鍵は、現在ハイライトされているインデックス値を記録し、インデックス値に基づいて背景のハイライトを調整することです。ドロップダウン リストの位置は、入力ボックスの位置に応じて設定する必要があります。ブラウザのサイズが変更された場合、ドロップダウン リストの位置はいつでも調整できます。
JQuery は Web フロントエンドのための強力なツールです。機会があればぜひご覧ください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。