javascript實(shí)現(xiàn)ecshop搜索框鍵盤上下鍵切換控制
在createSelect()函數(shù)中,返回一個(gè)對象,這個(gè)對象的兩個(gè)方法next()
和prev()中的調(diào)用的moveSelect()能正確的指向到該函數(shù),也可以把
moveSelect()函數(shù)放到外面來。
/* 鍵盤操作與問題推薦選擇 */
var curDo = null;
var select = createSelect();
$('#keywords').keyup(function(e){
var theEvent = e || window.event;
code = theEvent.keyCode ? theEvent.keyCode : (theEvent.which ? theEvent.which : theEvent.charCode)
var KEY = {
UP: 38,
DOWN: 40,
DEL: 46,
TAB: 9,
RETURN: 13,
ESC: 27,
BACKSPACE: 8,
LEFT:37,
RIGHT:39
};
clearTimeout(curDo);//鍵盤彈起的時(shí)候應(yīng)該取消定時(shí)ajax獲取數(shù)據(jù)操作
switch(code) {
case KEY.UP:
select.next();
break;
case KEY.DOWN:
select.prev();
break;
case KEY.RETURN:
$('.suggest-hover').trigger('click');
break;
case KEY.LEFT:
break;
case KEY.RIGHT:
break;
default:
curDo = setTimeout(getSuggest(),300);
break;
}
});
/* suggest選擇操作 */
function createSelect(){
var CLASSES = {
ACTIVE: "suggest-hover"
};
function moveSelect(step) {
var listItems=$('.suggest-results li');
//當(dāng)前hover的步數(shù)
var active;
active = $('.'+CLASSES.ACTIVE).index();
listItems.eq(active).removeClass(CLASSES.ACTIVE);
active += step;
if (active < 0) {
active = listItems.size() - 1;
} else if (active >= listItems.size()) {
active = 0;
}
var activeItem = listItems.eq(active).addClass(CLASSES.ACTIVE);
};
return {
next:function(){
moveSelect(-1);
},
prev:function(){
moveSelect(1);
}
};
};
以上就是本文分享給大家的全部內(nèi)容了,希望大家能夠喜歡
相關(guān)文章
手機(jī)Web APP如何實(shí)現(xiàn)分享多平臺功能
這篇文章主要介紹了手機(jī)Web APP如何實(shí)現(xiàn)分享多平臺功能的相關(guān)資料,需要的朋友可以參考下2016-08-08
JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法
這篇文章主要給大家介紹了關(guān)于JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
JS的replace方法與正則表達(dá)式結(jié)合應(yīng)用講解
replace方法的語法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正則表達(dá)式對象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。為了幫助大家更好的理解,下面舉個(gè)簡單例子說明一下2007-12-12
wow.js實(shí)現(xiàn)炫酷的頁面滾動伴隨動畫示例詳解
這篇文章主要為大家介紹了wow.js實(shí)現(xiàn)炫酷的頁面滾動伴隨動畫示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
原生js和jQuery隨意改變div屬性style的名稱和值
用原生js和jQuery實(shí)現(xiàn)改變隨意改變div屬性style的名稱和值的結(jié)果,這個(gè)實(shí)例比較實(shí)用,新手朋友們可以看看2014-10-10
JavaScript面向?qū)ο笾叽蠡驹瓌t實(shí)例詳解
這篇文章主要介紹了JavaScript面向?qū)ο笾叽蠡驹瓌t,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript面向?qū)ο笃叽蠡驹瓌t,包括單一職責(zé)、開閉原則、里氏替換、依賴倒置、接口隔離、迪米特法則及組合/聚合復(fù)用原則,需要的朋友可以參考下2020-05-05
JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度
這篇文章主要介紹了JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05

