jquery_jquery に基づいて実装された Baidu 検索風の入力ボックスのオートコンプリート機能-jsチュートリアル-php.cn

jquery_jquery に基づいて実装された Baidu 検索風の入力ボックスのオートコンプリート機能

WBOY

リリース： 2016-05-16 18:03:20

オリジナル

1221 人が閲覧しました

早速、直感的に見てみましょう。

この機能の実装にはサーバーの協力が必要です。クライアントは、スクリプトを通じてサーバーから取得したデータを表示します。

まず、クライアントの 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 if(words[i].startsWith(key)){ 
 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 フロントエンドのための強力なツールです。機会があればぜひご覧ください。 