Reputation: 538
I'm trying to find a method or plugin that will be able to handle taking a large amount of data (~10,000 rows) and create a combobox/drop down that can be filtered by typing, or being able to scroll through all records at once.
I've tried looking at different plugins as well as writing my own. There are a lot of great options out there, however once the data set gets large, the performance on many of these options goes down quickly.
I've been playing around with chosen. However my concerns are with are search performance when there are 10,000 records causes some delays on input and can lock up the browser if you try and type too fast. Also checking out chosen's github page, it doesn't seem as though there has been much development with it recently.
Browser requirements would be IE 7+ (IE is really the biggest problem due to poor javascript performance) & FF (Chrome and Safari are bonus).
Here is a jsfiddle that somewhat mimics the type of data that will be used in my case. I've also added the chosen plugin so you can see how it performs.
Upvotes: 4
Views: 2748
Reputation: 140
You might want to look at Datatables as an alternative. It's really slick- you can have a nice tabular layout (you refer to "rows", so I'm assuming it's tabular data rather than a single column) and the filtering is "smart/atomic" - e.g. if you type "red car" into the search box, it will give you all the rows that contain red AND car, but not necessarily together.
There are various plugins for it too- including a paginator that uses a slider, useful for a large page count. I've run it with 2,000+ records and it's pretty damn quick as long as your PC has enough RAM. It supports dynamic paging via AJAX as an alternative.
It implements "infinite scroll" too, with a couple of parameter changes and an AJAX call or two.
Upvotes: 2
Reputation: 1052
Are you sure it's good idea to load such big amount of data to client and process it there? Wouldn't it be better to do it as most of developers usually do - on server, processing input through ajax and load only needed data?
JS nowdays is quicker, but not that quick.
Upvotes: 1