1

Below my View Code. I am using datalist for dropdown but can not call scroll event for more data load and I want only 20 record show after scroll more data add using javascript

<input type="text" name="product" list="myselectbox"/>
<datalist id="myselectbox">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    ...
    <option>100</option>
</datalist>

//JavaScript

var mySelect = $('#myselectbox');
mySelect.scroll(function (e) {
        alert("b");
)};
Arun Kumar
  • 355
  • 3
  • 10
Bhavik Modh
  • 43
  • 5
  • did you check here??https://stackoverflow.com/questions/45911910/how-to-set-scroll-function-on-select-box/45912730 – Zia Yamin Jan 13 '21 at 05:19
  • Does this answer your question? [how to set scroll function on select box](https://stackoverflow.com/questions/45911910/how-to-set-scroll-function-on-select-box) – 54ka Jan 13 '21 at 05:21
  • I want also textbox for search data from dropdown list so I am using datalist and above method is not working for what i want – Bhavik Modh Jan 13 '21 at 05:30
  • The rendering and styling of `` is vendor and OS-specific and it does not fire scroll events. If you want to implement lazy loading of options, then you might want to look into implementing a custom dropdown, or use a third-party library that mimics this feature. – Terry Jan 13 '21 at 08:30

1 Answers1

-1

You can be able to achieve the scroll event, only if the child height is greater than the parent's height. In such case, the child will overflow. So in your case, i believe you have given fixed height to the myselectbox, so if the child content exceeds, it will scroll.

Now you can detect whether the scroll of myselectbox reached it's end, and then add new items to the list dynamically.

In order to detect the scroll has completed, please refer to this.

Arun Kumar
  • 355
  • 3
  • 10