Select field performance
-
I am using a single option select field with a search bar to let users select the city. So I have almost 3000 options in this select field. The problem is after I click on the select field, I have to wait a couple of noticeable moments until the search bar and options appear. On the mobile device, it’s much worse.
I found out that after clicking on the select field, options are rendered within HTML DOM. So I guess performance depends on the client CPU. I think that selecting the city or other location is quite a common use case and a lot of the times it means thousands of options inside the select field. Would it be possible for you to implement additional settings for a select field to improve performance in such use cases?
One relatively simple solution came to my mind:
1. Display only the search bar and don’t render/display options after the user clicks on the select-field.
2. Render options after user type X number of characters to select field.This way, the number of rendered options can be reduced. I was trying to achieve this by tweaking code in assets/forminator-ui/js/select2.full.js file. But I didn’t succeed. It would be great if you could point me in the right direction of what code needs to be edited.
I was thinking also about an alternative, more dirty workaround:
1. Click on the select-field after page renders using jQuery and hide rendered options.
2. After the user clicks on the select field, just display the options with my custom click event handler.I guess I would have to tweak the BE code anyway, due to possible conflicts in event handlers when clicking on the select field or closing it.
Let me please know, which workaround would be simpler in our opinion. I will highly appreciate every advice. Thank you.
- The topic ‘Select field performance’ is closed to new replies.