Posted on

Autocomplete Comes To WordPress Locator

Enhanced Search Banner

Enhanced Search, a premium add-on pack for the Store Locator Plus WordPress locator product, has added zip code autocomplete as a new option.   This feature, sometimes named “quick search”, provides real-time suggestions to users when typing data in an input form.    In addition, the latest release also comes with new settings that allow a site owner to dictate how state drop down lists interact in conjunction with the address/zip input element.

ES 4.2.07 UX Search Features Settings
Enhanced Search 4.2.07 Search Feature settings.

Address Autocomplete

A new setting, Address Autocomplete, can be set to “Zipcode Mode” to provide a zip/postal code suggestion box for users interacting with the locator map on your site.    When a user starts typing a zip  code into the input box, Store Locator Plus will query your current location list and suggest zip codes that are part of your current location list.     This provides a real-time indication to users of the zip codes that you service.

ES 4.2.07 Autocomplete 2-Character Suggestions
ES 4.2.07 Autocomplete 2-Character Suggestions

The autocomplete feature is currently triggered when 2 or more characters are entered.  As the user types more characters the autocomplete list is revised to narrow down potential matches.      The user can select an existing zip code from the suggested list at any time or opt to enter their own zip or postal code.

ES 4.2.07 Autocomplete 3-Character Suggestions
ES 4.2.07 Autocomplete 3-Character Suggestions
ES 4.2.07 Autocomplete Selected Zip Results
ES 4.2.07 Autocomplete Selected Zip ResultsE

The default setting for this feature is “none”, which does not offer the autocomplete service to the user.  It will leave the default user-specific/browser-based autocomplete suggestion list intact.

ES 4.2.07 Autocomplete Settings
ES 4.2.07 Autocomplete Settings

The autocomplete technology has been designed to allow for future expansion to include other address elements such as countries, cities, or other relevant address data.   A generic name-and-address match may also be included in future releases of Enhanced Search.

Selector / Address Input Interaction

In addition to Autocomplete, a second new setting has been added to Enhanced Search.    The Selector Behavior settings impacts how the city, state, and country drop down selectors interact with the address input box.

ES 4.2.07 Zip Entered With State Selector Unused
ES 4.2.07 Zip Entered With State Selector Unused

The default setting, which is how things have worked in the past, allows a user to BOTH enter a zip code AND select a state.    In this “Allow Selector and Address Input” mode you could have someone enter a Massachusetts zip code like 01886 AND select the state “CA” from the drop down (operating in discrete filter mode) and end up with ZERO results even though you have locations in MA and CA.

The new Selector Behavior setting “Disable Address When Using Selector” prevents the user from setting BOTH an address/zip code AND selecting a state (or city or country) from the drop down.     When the user has typed an address and then clicks on the state selector, for example,  the address field is cleared.     The same happens in reverse, if the user selects a state then clicks on the address input the state selector is cleared.     To help abate user frustration, the values are saved and restored whenever this happens.

ES 4.2.07 "Either Or" Mode Resets Address When State Selected
ES 4.2.07 “Either Or” Mode Resets Address When State Selected

 

For example, if  the user enters “29464” in the address field then clicks on the state drop down the address field is cleared.   They then click back on the address field and the 29464 value is restored.   Same idea, in reverse, if you select a state first then enter an address then click back on the state.      The concept is to prevent a user from interacting with BOTH input elements.     This is an atypical behavior and thus you should have some type of message added to your custom search layout to warn the users how this works “Please enter a zip code OR pick a state, you cannot do both:”.

ES 4.2.07 Zip Restored When Re-clicking Address
ES 4.2.07 Zip Restored When Re-clicking Address
ES 4.2.07 List of MA Locations with State Selector set to Discrete mode
ES 4.2.07 List of MA Locations with State Selector set to Discrete mode

Other Changes

Other, less drastic, updates were also included in this patch.   Having radius selections such as 0.5 miles has been fixed.   A custom userinterface.js script is now employed and can be used to craft custom form interactions with JavaScript (make sure you back up any custom edits so you can restore after an update).

The admin interface for Enhanced Search now changes the admin selector labels and Search Labels labels (that reads oddly, but hey… I’m a code geek not an English major) to match your field labels presented to the user.   For example, change the label for City to “Town” and the admin interface for the Store Locator Plus User Experience will now read “Town Selector” and “Town Selector Label” and “Town Selector First Entry”.     It is  one small step toward making all of the locator fields malleable; allowing site owners to re-purpose something like a country field they may never use to some other geographic-specific element such as a region.

ES 4.2.07 Admin Labels Change When UI Labels Changed
ES 4.2.07 Admin Labels Change When UI Labels Changed

The screen captures on this post are from the iThemes Herschel WordPress Theme using the new SLP 4.2.35 plugin theme Twenty Fifteen Rev 02.   No layout or settings modifications have been made for these screenshots.

Change Log