스크롤을 사용하여 자동 완성 데이터를로드하는 방법

Question

jquery auto completed search를 만들었습니다. 내 자동 완성 드롭 다운 내에서 1000 개 이상의 레코드를로드해야합니다. 나는 사용자가 다음 레코드를 스크롤 다운하면 처음으로 10 개의 레코드를 스크롤하도록 변경하고 싶습니다.이 부분에 조언 해주세요/

Answer 1

전체 코드를 작성할 수는 없지만, SO는 코드 작성을 위해 사람들을 사귈 곳이 아닙니다.

그러나 나는 당신이 그것을 성취 할 수있는 몇 가지 단계를 분명히 보여줄 것입니다.

1. PHP에서 반환 한 모든 항목을 변수로로드/저장합니다.

2. 그런 다음 자동 완성 드롭 다운이 새로 고쳐 져야하는 다음 10 개 항목을로드해야하는 이벤트를 바인딩해야합니다. 예를 들어, Down 화살표 keydown 이벤트 일 수 있습니다.

3. 이 바운드 이벤트는 포커스 된 요소가 10 번째 항목인지 확인해야합니다. 초점을 맞춘 요소의 인덱스를 저장할 변수를 유지하십시오. Up 또는 Down 화살표 keydown에서 변경됩니다.

4. 그런 다음 집중된 요소가 10 번째 요소이고 사용자가 Down 키를 누르면 자동 완성 search 이벤트를 발생시켜야합니다.

는 JS

var items[] = ... //your autocomplete items cached 
var focused = 1; //maintain variable to store focused element 
$(input).bind("keydown", function(event) { //bind keydown event 
    if (event.keyCode == $.ui.keyCode.DOWN) { 
     ++focused; 
     if(focused==10){ 
      $(input).autocomplete("option","source",//items from 1-10, 11-20,... changing for each page); 
      $(input).autocomplete("search",searchParam);//searchParam is input content, you can filter it to get last typed word 
      focused=1; //Reset focused element to first 
     } 
    } 
    else if (event.keyCode == $.ui.keyCode.UP) { 
     --focused; 
    } 
}); 

이것은 단지를 보여주는 단지 작은 샘플이다. 을 변경해야합니다.을 변경하고 더 많은 것을 추가하여 원하는 것을 얻으십시오.