Overview

FacetWP Autocomplete facet type

A search box that automatically displays suggestions as you type. The content searched in can be a custom field, a taxonomy or a post type attribute.

Note that the Autocomplete facet is not a “true” search; it’s meant for searching short data items like Last Name or SKU’s of products, and is less suited for searching phrases like post titles.

Available options

Name Description
Data Source Where the values live (taxonomy, custom field, post attribute)
Placeholder text The default text that appears within the input box. Note: this text is translatable with the facetwp_i18n hook, or with a translation plugin or gettext filter.

Customize the result limit

To show 20 results per search, add the following to your (child) theme’s functions.php:

add_filter( 'facetwp_facet_autocomplete_limit', function( $limit ) {
    return 20; // default: 10
});

Change the number of characters

By default, the Autocomplete facets starts searching when you enter 3 characters, and shows the text “Enter 3 or more characters”. If you want to change this number, add the following to your (child) theme’s functions.php:

// Replace "autocomplete_facet_name" with the actual Autocomplete facet name
add_filter( 'facetwp_render_output', function( $output, $params ) {
  $output['settings']['autocomplete_facet_name']['minChars'] = 2; // Default: 3
  return $output;
}, 10, 2 );

Translate the UI texts

The Autocomplete facet’s default input placeholder text can be changed with the “Placeholder text” setting. In a multilingual site, you can translate this placeholder text with the facetwp_i18n hook.

The default placeholder text and all other UI texts are also __() translatable strings which can be changed or translated with a plugin like Loco Translate, or with a WordPress gettext filter. For this last option, add the following code to your (child) theme’s functions.php and adapt the translations:

add_filter( 'gettext', function( $translated_text, $text, $domain ) {
  if ( 'fwp-front' == $domain ) {
    if ( 'Start typing' == $text ) {
      $translated_text = 'Start met typen';
    }
    if ( 'Enter {n} or more characters' == $text ) {
      $translated_text = 'Vul {n} of meer characters in';
    }
    if ( 'Loading' == $text ) {
      $translated_text = 'Zoeken';
    }
    if ( 'No results' == $text ) {
      $translated_text = 'Niets gevonden';
    }
    if ( 'Go' == $text ) {
      $translated_text = 'Zoek';
    }
  }
  return $translated_text;
}, 10, 3 );

Hide the “Go” button

The Autocomplete facet will automatically trigger a refresh when the Enter key is pressed, or when a choice is selected from the dropdown. So the “Go” button is not strictly needed to use this facet.

In combination with a proper Placeholder text, e.g. “Type and press Enter”, you could opt to hide the “Go” button with the following CSS:

.facetwp-autocomplete-update {
    display: none;
}

See also