Customizing an automcomplete field

Est. Reading: 1 minute
By: Rob LeVine
Created: 07/02/2024
Category:
Difficulty: Intermediate

Customizing an automcomplete field

Let's say you have the following list of items in an autocomplete dropdown (i.e., you added a drop-down field and checked the "Autocomplete" option):
ABC
BCD
DEF

If you type in "BC", the way it works out of the box is that the values ABC and BCD will be displayed and DEF will disappear. However, if you want it to only display the values whose starting characters match, you have to add custom coding.

Formidable uses the SlimSelect object for its autocomplete feature. Thankfully SlimSelect allows such customizations.

First, uncheck the Autocomplete option for the field. Next, give the class a custom CSS class name, e.g., slimSelectSearchStartsWith. This class name will be used for the jQuery selector, so you can do that however you want, either using my CSS class option or another. Finally, add the following, poorly formatted, script (inside HTML script tags) to your form or page. It sets up a "filter" so you can tell SlimSelect how to perform the search

	jQuery(document).ready(function($) {
		"use strict";
		$(".slimSelectSearchStartsWith select").addClass("frm_slimselect");
		var element = $(".slimSelectSearchStartsWith select");
		for (let i=0;i<element.length;i++) { 
                              var elementToSlim = element[i]; 
                             new SlimSelect({ 
                                      select: elementToSlim, 
                                      events: { searchFilter: (obj, search ) => {
						return obj.text.toLowerCase().indexOf(search.toLowerCase()) === 0
					}
				}
			});
		}
	});

Leave a Reply

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crosschevron-leftchevron-rightarrow-right