In some cases the AJAX calls necessary for the autocomplete can be slow.
To solve this issue I'd like to have the option to pre-load all options and use client side JS to do the autocompletion.
This can give a big speed boost for the customer experience.

For this I'd recommend using the Chosen library, for which there is a Drupal module as well.

CommentFileSizeAuthor
#3 webform_autocomplete-add_chosen_option_for_taxonomy_terms-3072739-3.patch8.29 KBpaulvandenburg
#3 interdiff-2-3.txt8.68 KBpaulvandenburg
#2 webform_autocomplete-add_chosen_option_for_taxonomy_terms-3072739-2.patch5.81 KBpaulvandenburg

Comments

paulvandenburg created an issue. See original summary.

paulvandenburg’s picture

paulvandenburg commented
Status: Active » Needs review
StatusFileSize
new webform_autocomplete-add_chosen_option_for_taxonomy_terms-3072739-2.patch5.81 KB

This patch adds the mentioned functionality.

It is currently only compatible with the taxonomy terms options source.
The necessary module_exists checks and form API states are used to make sure you only see the new setting if it is applicable.

I've tested it with a list of 600+ terms.

To use this new feature you need to install the JS library (unzip the latest release (1.8.7) in your library folder) and enable the chosen module.
If you don't want chosen suddenly appearing in other places in your Drupal install, modify (or empty) the selection setting here: /admin/config/user-interface/chosen
This new feature forces Chosen to act on the autocomplete field, so your chosen filter here is not important.

I'd also recommend enabling this option: "Search also in the middle of words"

paulvandenburg’s picture

paulvandenburg commented
StatusFileSize
new interdiff-2-3.txt8.68 KB
new webform_autocomplete-add_chosen_option_for_taxonomy_terms-3072739-3.patch8.29 KB

Chosen does not handle the mobile view, so users on mobile get a huge dropdown instead of the autocomplete.
So this went back to the drawing table. I've extended the previous solution to now support 2 preload strategies.

  1. A new html5 based preloading, see datalist element
  2. The previous Chosen based preloading

The Chosen option is only visible if the chosen module is enabled, otherwise you only see the default (none) and the html5 variant.

joshahubbers’s picture

joshahubbers commented
Status: Needs review » Reviewed & tested by the community

Tested en works fine.