Dropdown filtering for large datasets

Question

I'm trying to find a method or plugin that can handle a large amount of data (~ 10,000 rows) and create a drop-down list / drop-down list that can be filtered by typing or skipping all the records at once.

I tried looking at different plugins, as well as writing my own. There are many great options, however, as soon as the data set becomes large, the performance of many of these parameters will quickly decline.

I played with chosen . However, my problems are related to the search results, when 10,000 entries lead to input delays and may block the browser if you try to enter too quickly. Also checking out the selected github page, it looks like it has evolved a bit lately.

The browser requirements will be IE 7+ (IE is really the biggest problem due to poor javascript performance), and FF (Chrome and Safari is a bonus).

Here is a jsfiddle that mimics the data type to be used in my case. I also added the selected plugin so you can see how it works.

Answer 1

Alternatively you can look at datatables . This is really slick — you can have a beautiful table layout (you refer to “rows”, so I assume that this is table data, not just a single column), and smart / atomic filtering, for example. if you type “red car” in the search field, it will provide you with all the lines containing the red car AND, but not necessarily together.

There are other plugins for him - including a page that uses a slider useful for a large number of pages. I started it with 2000+ entries, and it's pretty damn fast as long as your PC has enough RAM. It supports dynamic paging through AJAX as an alternative.

It also implements "endless scrolling" with a few parameter changes and an AJAX call or two.

Answer 2

Are you sure it’s nice to download such a large amount of data to the client and process it there? Wouldn’t it be better to do this, as most developers usually do - on the server, processing input through ajax and loading only the necessary data?

JS is now faster, but not so fast.