Javascriptはecshop検索ボックスキーボードの上下キー切り替えを実装します control_javascriptスキル

createSelect() 関数ではオブジェクトが返され、このオブジェクトの 2 つのメソッドは next()
prev() で呼び出される moveSelect() は関数を正しく指すことができ、
を入れることもできます moveSelect()関数は外部に配置されています。

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

/* キーボード操作と問題の推奨オプション */
var curDo = null;
var select = createSelect();
$('#keywords').keyup(function(e){
var theEvent = e || ウィンドウ.イベント;
コード = theEvent.keyCode ? theEvent.keyCode : (theEvent.that ? theEvent.that : theEvent.charCode)
var KEY = {
UP: 38、
ダウン: 40、
DEL: 46、
TAB: 9、
戻り値: 13、
ESC: 27、
バックスペース: 8、
左:37、
右:39
};
clearTimeout(curDo);//キーボードがポップアップしたら、スケジュールされた Ajax データ取得操作をキャンセルする必要があります
スイッチ(コード) {
ケース KEY.UP:
selecting.next（）;
休憩;
KEY.DOWN の場合:
selecting.prev（）; 休憩;
case KEY.RETURN:
$('.suggest-hover').trigger('click');
休憩;
ケース KEY.LEFT:
休憩;
ケース KEY.RIGHT:
休憩;
デフォルト:
CurDo = setTimeout(getSuggest(),300);
休憩;
}
});
/* 選択操作を提案します */
関数 createSelect(){
var CLASSES = {
アクティブ: 「suggest-hover」
};
function moveSelect(step) {
var listItems=$('.suggest-results li');
// 現在のホバーのステップ数
var active;
アクティブ = $ ('.' Classses.active) .index (); listItems.eq(active).removeClass(CLASSES.ACTIVE);
アクティブ = ステップ;
if (アクティブ active = listItems.size() - 1;
} else if (active >= listItems.size()) {
アクティブ = 0;
}
var activeItem = listItems.eq(active).addClass(CLASSES.ACTIVE);
};
return {
next:function(){
moveSelect(-1);
},
prev:function(){
moveSelect(1);
}
};
};

上記はこの記事で皆さんに共有した内容のすべてです。気に入っていただければ幸いです