如何从数组加载数据列表中的更多数据

Question

I have an array of data which i have to show in datalist. I want to load only limited data first and then load another limited data as scroll goes down. All this work i have to done inside datalist ie i need to put that scroll inside datalist and then when scroll goes down to the end of datalist screen , more data will be come from array.

I am using meteor so i need to return that array on client side using helpers. My code is :

This is my helper. Here a is array which will return on html(client side).

Template.mytemplate.helpers({
  // Here will be helper for displaying data in client side//
  searched_val:function(){
    var a= SessionStore.get("myvalue");
    // console.log(a);
    return a;
  }
  }
});

My html code is (client side code) :

<div class="form-group row ">
            <div class="dropdown col-xs-12">
              <input list="d1" id="search" name="d1" class="form-control input-xs" placeholder="Search by">
                <datalist id="d1" style="overflow-y:auto">
                  {{#each searched_val}}
                <option class="form-control" value="{{this}}"> {{this}} </option>
                 {{/each}}
               </datalist>
            </div>
        </div>

Now , How can i do it. Is there any jquery,Javascript code for it?

I also have seen "Jquery load more data on scroll" here but it doesn't work for me as that was used for whole page/window but i need to do it for only datalist and within datalist. Here is the link " jQuery load more data on scroll " But it didn't work for me.

Thanks in Advance

Answer 1

What should you do...

1) First you subscribe the limited array from your desired collection.

2) Just return the <collection>.find() to the helper.

3) Then add a scroll event listener through which you'll check if the current scroll position has reached the last limit of the page then you'll subscribe more items.