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

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

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

まず、クライアントの HTML を確認します。

コードをコピーします コードは次のとおりです:

 
nbsp;
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
 
 
 

')
.hide()
.insertAfter('#submit');
//ドロップダウン リストの内容をクリアし、ドロップダウン リスト領域を非表示にします
var clear = function(){
$autocomplete.empty().hide();
};
//イベントを登録し、入力ボックスがフォーカスを失ったときにドロップダウン リストをクリアして非表示にします
$ searchInput.blur(function(){
setTimeout(clear,500);
});
//ドロップダウン リスト項目がハイライトされている場合のインデックス。表示されたら、マウスまたはキーボードの上下キーを動かすと、Baidu 検索のように強調表示された項目が移動します。
var selectedItem = null
//タイムアウトの ID
var timeoutid = null; >//ドロップダウン項目のハイライト背景を設定します
var setSelectedItem = function(item ){
//インデックス変数を更新します
selectedItem = item
//上下キーを押します。 0 未満の場合は最大値に設定され、最大値より大きい場合は 0 に設定されます。
if (selectedItem selectedItem = $autocomplete.find('li').length - 1;
}
else if(selectedItem > $autocomplete.find('li').length -1 ) {
selectedItem = 0;
}
//まず他のリスト項目のハイライト背景を削除し、次に現在のインデックスの背景をハイライトします
$autocomplete.find('li' ).removeClass('highlight')
.eq(selectedItem).addClass('highlight');
} var ajax_request = function(){
//ajax サーバー通信
$.ajax({
'url':'/test/index.jsp', //サーバーのアドレス
'data':{'search-text':$searchInput.val()}, / /Parameters
'dataType ':'json', //戻りデータ型
'type':'POST', //リクエスト型
'success':function(data){
if( data.length) {
//データを走査し、オートコンプリート領域に追加します
$.each(data, function(index,term) {
//li タグを作成し、ドロップダウン リストに追加します
$('

').text(term).appendTo($autocomplete)
.addClass('clickable')
.hover(function(){
/ /ドロップダウン リスト内の各項目のイベント、その中にマウスを移動する操作
$(this).siblings().removeClass('highlight');
$(this).addClass('highlight) ');
selectedItem =index;
},function(){
//ドロップダウン リスト内の各項目のイベント、マウスの離脱操作
$(this).removeClass ('highlight');
/ /マウスが離れるとインデックスは -1 に設定され、マークとして使用されます
selectedItem = -1;
.click(function) (){
//マウスがドロップダウン リスト内のこの項目をクリックします。その場合、この項目の値を入力ボックスに追加します。
$searchInput.val(term)//Clear andドロップダウン リストを非表示
$autocomplete.empty().hide();
});
});//イベント登録が完了しました
//ドロップダウンの位置を設定しますリストを選択し、ドロップダウン リストを表示します
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left; ',$searchInput.css('width'));
$autocomplete.css({'position':'relative' ,'left':xpos "px",'top':ypos "px"});
setSelectedItem(0);
// ドロップダウン リストを表示
}
}
; //入力ボックスのイベントを登録します
$searchInput
.keyup(function(event) {
//英数字、バックスペース、スペース
if(event.keyCode > 40 ||event.keyCode == 8 ||event.keyCode ==32) {
//まずドロップダウン リストの情報を削除します
$ autocomplete.empty().hide();
clearTimeout(timeoutid);
timeoutid = setTimeout(ajax_request,100);
}
else if(event.keyCode == 38){
//Up
//selectedItem = -1 はマウスが離れたことを意味します
if(selectedItem == -1){
setSelectedItem($autocomplete.find('li').length-1);
}
else {
//インデックス マイナス 1
setSelectedItem(selectedItem - 1);
}
event.preventDefault();
}
else if(event.keyCode == 40) {
//Down
/ /selectedItem = -1 はマウスが離れたことを意味します
if(selectedItem == -1){
setSelectedItem(0)
}
else {
//インデックスを 1 増やします
setSelectedItem(selectedItem 1);
}
event.preventDefault();
}
})
.keypress(function(event){
// Enter キー
if(event.keyCode == 13) {
//リストが空かマウスが離れたため、現在のインデックス値がありません
if($autocomplete.find(' li').length == 0 || selectedItem == -1) {
return;
}
$autocomplete.find('li').eq(selectedItem).text ()); $autocomplete.empty().hide();
event.preventDefault();
}
})
.keydown(function(event){
//esc キー
if(event.keyCode == 27 ) {
$autocomplete.empty().hide();
}
});ウィンドウ サイズ変更のイベントとドロップダウン リストの位置変更
$(window).resize(function() {
var ypos = $searchInput.position().top;
var xpos = $searchInput. Position().left;
$autocomplete.css('width',$searchInput.css('width'));
$autocomplete.css({'position':'relative ','left': xpos "px",'top':ypos "px"});

;

キーワードを入力してください

> ;
本文>



サーバー側のコードについては、ここでは JSP を選択しますが、サーバー側は重要ではなく、データを送信することが重要です。

コードをコピー コードは次のとおりです:

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 フロントエンドのための強力なツールです。機会があればぜひご覧ください。