Möchten Sie das Modern Dropdown-Feld in WPForms anpassen? Wenn Sie dieses Feld verwenden, ermöglichen Sie Ihren Benutzern die Eingabe in ein Suchfeld und die Anzeige von Ergebnissen auf der Grundlage der eingegebenen Zeichen und mit einem kleinen PHP-Snippet können Sie die Anzahl der Ergebnisse steuern, die bei der Eingabe von Schlüsseln angezeigt werden. In diesem Tutorial werden wir Sie durch die einzelnen Schritte führen, um die Anzahl der angezeigten Ergebnisse anzupassen.
Ihr Formular erstellen
Zunächst müssen Sie Ihr Formular erstellen und Ihre Felder hinzufügen, wobei mindestens ein Dropdown-Feld im Formular enthalten sein muss.
Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.
Sobald Sie Ihr Dropdown-Feld hinzugefügt haben, klicken Sie auf die Registerkarte Erweitert und wählen Sie Modern für den Stil des Dropdowns.
Anpassen des modernen Dropdowns
Jetzt ist es an der Zeit, das Code-Snippet hinzuzufügen, um das Modern Dropdown-Feld anzupassen.
Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte diese Anleitung.
/**
* Customize modern dropdown search results
*
* @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
*/
function wpf_dev_modern_dropdown_search_results( $config, $forms ) {
// Change 519 to an ID of your actual form or remove this condition to apply to all forms.
if ( ! array_key_exists( 519, $forms ) ) {
return $config;
}
// Change 6 to a large number to show all the matching results for every search (might impact performance).
$config[ 'searchResultLimit' ] = 6;
return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_search_results', 10, 2 );
Denken Sie daran, die 519 so zu ändern, dass sie mit Ihrer eigenen Formular-ID übereinstimmt.
Wenn Sie nicht sicher sind, wie Sie Ihre Formular-ID finden, besuchen Sie bitte diese Anleitung.
Nachdem Sie das Snippet hinzugefügt und die Formular-ID aktualisiert haben, müssen Sie im letzten Schritt das searchResultLimit auf die Anzahl festlegen, die angezeigt werden soll, wenn Ihre Benutzer in das Suchfeld eingeben. In unserem Beispiel wollen wir nur die 6 besten Ergebnisse anzeigen.
Und das ist alles, was Sie brauchen! Möchten Sie auch den Text ändern, der angezeigt wird, wenn keine Ergebnisse gefunden werden? Werfen Sie einen Blick auf unsere Anleitung zum Ändern des Textes "Keine Ergebnisse gefunden" im modernen Dropdown-Feld.
Referenzfilter
wpforms_field_select_choicesjs_config
FAQ
F: Kann ich das Dropdown-Menü auf 2 Einträge beschränken?
A: Auf jeden Fall! Zuerst müssen Sie das Feld " Modernes Dropdown" bearbeiten und auf der Registerkarte " Erweitert" die Option " Auswahl mehrerer Optionen aktivieren" einschalten.
Sobald Sie diese Option aktiviert haben, können Sie dieses Snippet zu Ihrer Website hinzufügen.
/**
* Customize modern dropdown search results
*
* @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
*/
function wpf_dev_modern_dropdown_select_limit( $config, $forms ) {
// Change 519 to an ID of your actual form or remove this condition to apply to all forms.
if ( ! array_key_exists( 519, $forms ) ) {
return $config;
}
// Change 2 to a large number to show all the matching results for every search (might impact performance).
$config[ 'maxItemCount' ] = 2;
// Modify the 'maxItemText' to make it translatable when limiting the selections.
$config['maxItemText'] = sprintf( __( 'Only %1$s values can be added', 'wpforms' ), $config['maxItemCount'] );
return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_limit', 10, 2 );
F: Wie kann ich dafür sorgen, dass meine Suche mehr exakte Treffer liefert?
A: Sie können den Schwellenwert ändern, um Ihre Suche spezifischer zu gestalten. Fügen Sie einfach dieses Snippet zu Ihrer Website hinzu.
/**
* Return more specific results
*
* @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
*/
function wpf_dev_modern_dropdown_select_search( $config, $forms ) {
// Providing more specific search results
// This will be added to all WPForms Modern Dropdown field for the search bar
$config[ 'fuseOptions' ] = array(
'threshold' => 0.1
);
return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_search', 10, 2 );