Javascript는 ecshop 검색 상자 키보드 위아래 키 전환 control_javascript 기술을 구현합니다.

createSelect() 함수에서는 객체가 반환되며, 이 객체의 두 가지 메소드는 next()
prev()에서 호출된 moveSelect()는 함수를 올바르게 가리킬 수 있습니다.
moveSelect() 함수는 외부에 배치됩니다.

코드 복사 코드는 다음과 같습니다.

/* 키보드 조작 및 문제 추천 옵션 */
var curDo = null;
var select = createSelect();
$('#keywords').keyup(함수(e){
var theEvent = e || window.event;
코드 = theEvent.keyCode ? theEvent.keyCode : (theEvent.which ? theEvent.which : theEvent.charCode)
      var KEY = {
              최대: 38,
다운: 40,
델: 46,
탭: 9,
반환: 13,
             ESC: 27,
백스페이스: 8,
              왼쪽:37,
오른쪽:39
        };
​​​​clearTimeout(curDo);//키보드가 팝업되면 예정된 Ajax 데이터 수집 작업을 취소해야 합니다
스위치(코드) {
케이스 KEY.UP:
선택.다음()
                 휴식;
케이스 KEY.DOWN:
> >                  휴식;
케이스 KEY.RETURN:
                    $('.suggest-hover').trigger('click');
                 휴식;
케이스 KEY.LEFT:
                 휴식;
케이스 KEY.RIGHT:
                 휴식;
                 기본값:
CurDo = setTimeout(getSuggest(),300);
                 휴식;
}
});
/* 선택 작업 제안 */
함수 createSelect(){
        var CLASSES = {
              활성: "제안-호버"
        };
         기능 moveSelect(단계) {
            var listItems=$('.suggest-results li');
//현재 호버링의 단계 수
          var 활성;
활성 = $ ('.' Classses.active) .index ()
              listItems.eq(active).removeClass(CLASSES.ACTIVE);
              활성 = 단계;
                    if (활성 < 0) {
                     active = listItems.size() - 1;
                  } else if (active >= listItems.size()) {
                    활성 = 0;
            }
               var activeItem = listItems.eq(active).addClass(CLASSES.ACTIVE);
        };
         반품 {
              다음:함수(){
                  moveSelect(-1);
            },
               이전:function(){
                 moveSelect(1);
            }
        };
};

위 내용은 이 글에서 공유한 모든 내용입니다. 마음에 드셨으면 좋겠습니다