jquery autocomplete custom combobox- ui hangs #2014
Comments
|
Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer? |
|
Even if it's less than 5000, it slows to crawl in the new one. Been using jQuery UI 1.12.1 for years, with a custom autocompleting combobox I wrote; albeit hacky, it does work excellently with tens of thousands of records in 1.12.1 and lags like crazy in 1.13.0 thus we cannot upgrade. https://github.com/noblesigma/jQuery.UI.Combobox.Lazyload |
|
Can you provide a link to a simple test case? I'm curious what might have changed. |
|
Yes, a test case would definitely help. |
|
This is about the https://api.jqueryui.com/autocomplete/ widget, right? I don't think this widget is able to work with thousands of options. Not even hundreds. I would strongly recommend to use its AJAX filter functionality. https://api.jqueryui.com/autocomplete/#option-source |
|
I will try to provide a test case soon. This is definitely a before I had it working now it doesn't work with the new version thing, sorry guys, I know it sucks I just haven't had much time. The github example admittedly is a bit old and it doesn't self host work again, so it will take me some time to make you a new demo. It doesn't work well with hundreds of thousands of options, if they get rendered into the DOM, no, but generally if you allow people to type one to two letters, they find it before it gets that big, so in most every case anyways. Like I said, I hope to have an example for you that doesnt need a server soon since its just JSON. |
|
If you download those files locally and load it from a browser, like firefox, you can see that index-working works (just scroll down and wait, and the 2nd chunk will load in that same dropdown), and index-non-working doesn't work. The only difference is the jQueryUI version; and if you really wanted, the json could go up to 20K+ lines in 1.12.1 without breaking, but in 1.13.0 it breaks in under 1.5k. Sorry it took so long. Good luck. Please let me know if you need help with something. |
|
Thanks for the test case! That helps a lot. I did a performance profile on both 1.12.1 & 1.13.0 test cases and it looks like the performance regression is caused by ef2e9ba. The added |
|
@noblesigma Thanks for the test case, I now understand what's the issue here! @mgol Looks like an ugly bug here as Scott's commit fixed a few bugs. Seems like a complicated one. Not sure what to do :-/ |
jQuery UI 1.13.0 changed the logic attaching the `_untrackClassesElement` listener in the `_classes` widget method; one of the side effects was calling `this._on` for each node that needed the listener. That caused a severe performance degradation for large comboboxes as each `_on` jQuery UI call causes a jQuery `add` call that calls Sizzle's `uniqueSort` underneath. Instead, collect the nodes that need the listener and then, outside of the loop, create a jQuery object out of them and attach the listener once. That's still slower than the jQuery 1.12 version but only slightly: 936 ms to 1.03s on a very large list on a recent MacBook Pro, compared to ~30 seconds before this patch. Fixes jquerygh-2014
|
I think I have a fix, PTAL: #2037. |
jQuery UI 1.13.0 changed the logic attaching the `_untrackClassesElement` listener in the `_classes` widget method; one of the side effects was calling `this._on` for each node that needed the listener. That caused a severe performance degradation for large comboboxes as each `_on` jQuery UI call causes a jQuery `add` call that calls Sizzle's `uniqueSort` underneath. Instead, collect the nodes that need the listener and then, outside of the loop, create a jQuery object out of them and attach the listener once. That's still slower than the jQuery 1.12 version but only slightly: 936 ms to 1.03s on a very large list on a recent MacBook Pro, compared to ~30 seconds before this patch. Fixes jquerygh-2014
jQuery UI 1.13.0 changed the logic attaching the `_untrackClassesElement` listener in the `_classes` widget method; one of the side effects was calling `this._on` for each node that needed the listener. That caused a severe performance degradation for large comboboxes as each `_on` jQuery UI call causes a jQuery `add` call that calls Sizzle's `uniqueSort` underneath. Instead, collect the nodes that need the listener and then, outside of the loop, create a jQuery object out of them and attach the listener once. That's still slower than the jQuery 1.12 version but only slightly: 936 ms to 1.03s on a very large list on a recent MacBook Pro, compared to ~30 seconds before this patch. Fixes jquerygh-2014
jQuery UI 1.13.0 changed the logic attaching the `_untrackClassesElement` listener in the `_classes` widget method; one of the side effects was calling `this._on` for each node that needed the listener. That caused a severe performance degradation for large comboboxes as each `_on` jQuery UI call causes a jQuery `add` call that calls Sizzle's `uniqueSort` underneath. Instead, collect the nodes that need the listener and then, outside of the loop, create a jQuery object out of them and attach the listener once. That's still slower than the jQuery 1.12 version but only slightly: 936 ms to 1.03s on a very large list on a recent MacBook Pro, compared to ~30 seconds before this patch. Fixes jquerygh-2014
jQuery UI 1.13.0 changed the logic attaching the `_untrackClassesElement` listener in the `_classes` widget method; one of the side effects was calling `this._on` for each node that needed the listener. That caused a severe performance degradation for large comboboxes as each `_on` jQuery UI call causes a jQuery `add` call that calls Sizzle's `uniqueSort` underneath. Instead, collect the nodes that need the listener and then, outside of the loop, create a jQuery object out of them and attach the listener once. That's still slower than the jQuery 1.12 version but only slightly: 936 ms to 1.03s on a very large list on a recent MacBook Pro, compared to ~30 seconds before this patch. Fixes gh-2014 Closes gh-2037
|
jQuery UI 1.13.1 including a fix for this issue has been released: https://blog.jqueryui.com/2022/01/jquery-ui-1-13-1-released/. |
dropdown is too slow to render when data is close 5000. How to limit options like show first 100 data then add option like more data avaible then when clicked on this it bring another 100 and so on
The text was updated successfully, but these errors were encountered: