How to add pagination in autocomplete for large data set?

How to add pagination in autocomplete for large data set?

Posted by: venkateshpallanti on 3 April 2018, 5:51 am EST

• 

  venkateshpallanti

  • Post Options:
  • Link
    Copy

  Posted 3 April 2018, 5:51 am EST

  I am using rest api json data in autocomplete it will take large time to load data,.
  
  I need to add onscroll data loading,.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 3 April 2018, 8:19 am 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

• 

  venkateshpallanti

  • Post Options:
  • Link
    Copy

  Posted 4 April 2018, 9:47 am EST

  Thank you for replying.
  
  But i need pagination as in FlexGrid where user have to manually click to get new items as our customers are already familiar to the functionality from using FlexGrid
  
  Please send a demo link as before as i find it helpful in understanding.
  
  Here is an example of what i need
  
  http://fairwaytech.com/flexbox/flexbox-demos/

  Thanks again

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 5 April 2018, 7:12 am EST

  Hi,

  Please give this a try and let me know if it works for you.

  https://stackblitz.com/edit/angular-85jp6a