In our environment we are using Ajax to bind a large (>1000 rows) list of options with the ability to autocomplete and page as you go. I can get it to bind, and I can get it to scroll perpetually - but when I click on one of the options, it puts the tag in the box (expected) but makes all the options in the box go gray and then clicking on any other option wipes out the box. Then if you click again on a different object, it puts the first one back in the box. I can’t get two in and once the first one is clicked, that’s all that will show up. I can see in the browser console log that the on list changed code is getting hit each time, but not the whole page or document. This control is on a modal form. I’d post code but it’s broken across three files (2 js, 1 ascx). I can work something out if needed. I was thinking maybe something about postback or not handling the selection data right… but it’s tough. Any ideas of where to look for more info? Anyone run into this before?
Select2 does not perform well with data sets over about 500 items. I suspect you’re running into memory/CPU issues, and that if you waited long enough after making a selection, the “disabled” options would become enabled again.
The purpose of the Select2 AJAX feature is to filter a large remote data set down to a manageable number of items based on the user’s search term. If you are ignoring the user’s search term and simply returning the entire 1,000±item data set, even with pagination, then you aren’t using it as it was intended.
You can test whether the problem is the size of the data set (versus some other issue) by reducing your data set to a small subset (maybe 100 items), and then see whether the Select2 performs as you expect. If it doesn’t, then there is most likely something wrong with your code, or possible an issue with how Select2 interacts with your MVC framework.