when data is very large, so slow

[richardguancn]

Dear friend,
Can you help me to optimize the speed?
When data is very large(almost 4000 items), It will be slow.
Thanks a lot.

[truckingsim]

@richardguancn is there a reason why that much data has to be available on load? You gotta remember this recreates a selectbox using divs, and li's. For 4000 options you looking at somewhere between 12,000 and 16,000 html elements (depending on various options you use).

The browser does not handle that many elements well, and to make it worse we are building those in javascript (huge memory hog) and then building them dynamically. That many elements being build with javascript is super resource intensive.

If you still want to use bootstrap-select but aren't against having a search feature, I wrote a plugin which ties in with bootstrap-select.

You would start with an empty select (do not load any options [or if you do, only load a limited amount] on the page or it defeats the whole purpose of this), have bootstrap-select startup like it normally would but then on the select if you call my plugin it will take control of the search box and hit your server with a query so that you can then return a limited result set.

So you while no or little options will be available on load, it allows your page to work fast with large sets of data while still getting all the benefits of bootstrap-select.

Let me know if you have any questions.

https://github.com/truckingsim/Ajax-Bootstrap-Select

[rougin]

@truckingsim do you have any demo or JSFiddle example of your plugin? I have the same problem also with @richardguancn regarding many items inside the select tag with bootstrap-select.

[truckingsim]

@rougin I don't because it does require some server side processing and I don't have a server up that I can use for this. Basically think of it like a basic twitter typeahead but with bootstrap select. So you don't lose the control of bootstrap-select or the look of a drop down with the ability to search and filter results. All results shown are shown because of the processing you do on the servers side.

[rougin]

@truckingsim i just want to know how to process the data from the server side and add it to the bootstrap select. I apologize for asking this because i'm very new to AJAX and server-client processing :D

[truckingsim]

@rougin I made this example for you and put it on the repo

https://github.com/truckingsim/Ajax-Bootstrap-Select/tree/master/example

It uses a JSON file of random data but you would replace that with say a database of a large number of results. I also use array_filter in PHP again for a database you would replace that with a WHERE statement in SQL.

I didn't put this up anywhere to run because it still requires PHP, which would require more than github pages, it would require me to have a server. You can run this locally though, its not doing anything special, any php version 5.3+ should work.

[rougin]

@truckingsim i finally got it. Thanks for this! Can I ask another question? Why does your plugin "refresh" the whole set when I use the up and down arrow key on the selected list? For example, I typed "hello" in the bootstrap-select but everytime i use the arrow keys (up and down), the plugin refreshes the whole data.

[truckingsim]

Its a bug in the plugin I'll get fixed. It is listening for any keydown not just keys that make sense. I'll release it as 1.0.2 and will comment here when it is out. Not sure if I'll have time to get to it today.

[truckingsim]

@rougin that fix is up, let me know if you have any other questions:

https://github.com/truckingsim/Ajax-Bootstrap-Select/releases/tag/1.0.2

[montrezorro]

uhm... I've already correct some bug and add some improvement...
If you want, I can make a pull request

[truckingsim]

@montrezorro make a new issue on the plugins repo. I saw some stuff u liked and others I didn't.

[rougin]

@truckingsim the current version of your plugin fixed my problem. Thanks! I'll try if your plugin supports cloning like in my stated issue here #605

[t0xicCode]

Feel free to re-open if you feel that this issue has not been addressed appropriately.

[misastajic]

All this is ok, but I am interested in this with the data from the mysql data.