javascript實現(xiàn)ecshop搜索框鍵盤上下鍵切換控制

更新時間：2015年03月18日 14:55:58 投稿：hebedich

這篇文章主要介紹了javascript實現(xiàn)ecshop搜索框鍵盤上下鍵切換控制,需要的朋友可以參考下

在createSelect()函數(shù)中，返回一個對象，這個對象的兩個方法next（）
和prev（）中的調(diào)用的moveSelect()能正確的指向到該函數(shù)，也可以把
moveSelect()函數(shù)放到外面來。

復(fù)制代碼代碼如下:

/* 鍵盤操作與問題推薦選擇 */

    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);//鍵盤彈起的時候應(yīng)該取消定時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);

            }

        };

    };