So passen Sie das moderne Dropdown-Feld an

Möchten Sie das Feld Modern Dropdown in WPForms anpassen? Wenn Sie dieses Feld verwenden, ermöglichen Sie Ihren Benutzern die Eingabe in ein Suchfeld und zeigen Ergebnisse basierend auf den eingegebenen Zeichen an. Mit einem kleinen PHP-Snippet können Sie die Anzahl der angezeigten Ergebnisse steuern. In diesem Tutorial führen wir Sie Schritt für Schritt durch die Anpassung der Anzahl der angezeigten Ergebnisse.

Erstellen Ihres Formulars

Zuerst müssen Sie Ihr Formular erstellen und Ihre Felder hinzufügen, wobei mindestens ein Dropdown-Formularfeld im Formular enthalten sein muss.

Wenn Sie Hilfe beim Erstellen 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, den Code-Snippet hinzuzufügen, um das Feld Modern Dropdown anzupassen.

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, sehen Sie sich dieses Tutorial an.

/**
 * 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 zu ändern, damit sie Ihrer eigenen Formular-ID entspricht.

Wenn Sie nicht sicher sind, wie Sie Ihre Formular-ID finden, besuchen Sie bitte dieses Tutorial.

Sobald Sie den Snippet hinzugefügt und die Formular-ID aktualisiert haben, besteht der letzte Schritt darin, searchResultLimit auf die Anzahl der Ergebnisse zu setzen, die Sie anzeigen möchten, während Ihre Benutzer in das Suchfeld tippen. In unserem Beispiel möchten 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? Sehen Sie sich unser Tutorial an So ändern Sie den Text „Keine Ergebnisse gefunden“ im Feld „Modern Dropdown“.

Referenzfilter

wpforms_field_select_choicesjs_config

FAQ

F: Kann ich die Auswahl auf nur 2 Elemente beschränken?

A: Absolut! Zuerst müssen Sie das Feld Modern Dropdown bearbeiten und auf der Registerkarte Erweitert die Option zum Aktivieren von Mehrfachauswahl aktivieren.

Sobald Sie diese Option aktiviert haben, können Sie diesen 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 sicherstellen, dass meine Suche eine exaktere Übereinstimmung ergibt?

A: Sie können den Schwellenwert ändern, um Ihre Suche spezifischer zu gestalten. Fügen Sie einfach diesen 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 );