0

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 i.e 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

Community
  • 1
  • 1
Coder
  • 13
  • 7
  • *"I need a quick answer."* ... there are no priorities here. People volunteer to answer questions. – charlietfl Apr 20 '17 at 11:55
  • ok i apologise but i m in trouble that's why said that. well , I will remove it and Thanks for correcting me :) – Coder Apr 20 '17 at 12:01

1 Answers1

0

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.

Mohammad Kashif Sulaiman
  • 253
  • 1
  • 11
  • I already call that find command `.find().fetch()` and after that i got data in array. Now i want to work with that obtained array. – Coder Apr 21 '17 at 06:53
  • This is very weird if you're acquiring all the data once without any purpose. Hope you'll be getting the data with limitations. If you did this, follow the step 3. – Mohammad Kashif Sulaiman Apr 21 '17 at 11:35