How to add load data in autocomplete on scrolling for large data sets?

How to add load data in autocomplete on scrolling for large data sets?

Posted by: venkateshpallanti on 2 April 2018, 8:48 pm EST

• 

  venkateshpallanti

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 April 2018, 8:48 pm EST

  I am using rest api json data call in autocomplete but it takes long time to load, i need to call some items initially then load remaining data on scrolling,.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 4 April 2018, 1:06 pm EST

  Hi,

  You can use scroll event provided by HTMLElement.

  //Refer to following code snippet

  autoComplete.dropDown.onscroll=(e)=>{
  if(e.target.scrollHeight-e.target.clientHeight-e.target.scrollTop < 5){
  var scrollPos=e.target.scrollTop;
  var newData=this.dataSvc.getCountriesByCount(this.data.length,this.data.length+10);
  if(newData.length<1){
  return;
  }
  newData.forEach( (item)=>{
  this.data.push(item);
  });
  autoComplete.refresh();
  e.target.scrollTop=scrollPos;
  }
  };
  
  

  Here is a working example of the same :- https://stackblitz.com/edit/angular-fzclpj