モダンなドロップダウンフィールドをカスタマイズする方法

WPFormsのモダンなドロップダウンフィールドをカスタマイズしますか？ このフィールドを使用すると、ユーザーは検索ボックスに入力でき、入力された文字に基づいて結果が表示されます。短いPHPスニペットを使用すると、キーが入力されるときに表示される結果の数を制御できます。このチュートリアルでは、表示される結果の数をカスタマイズする各ステップを説明します。

フォームの作成

まず、フォームを作成し、少なくとも1つのドロップダウンフォームフィールドを含むフィールドを追加する必要があります。

フォームの作成にヘルプが必要な場合は、このドキュメントを確認してください。

ドロップダウンフィールドを追加したら、高度な設定タブをクリックし、ドロップダウンのスタイルとしてモダンを選択します。

モダンなドロップダウンのカスタマイズ

次に、モダンなドロップダウンフィールドをカスタマイズするためのコードスニペットを追加します。

サイトにスニペットを追加するのにヘルプが必要な場合は、このチュートリアルを参照してください。

/**
 * 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 );

519を自分のフォームIDに合わせて変更することを忘れないでください。

フォームIDの見つけ方がわからない場合は、このチュートリアルをご覧ください。

スニペットを追加してフォームIDを更新したら、最後のステップは、ユーザーが検索ボックスに入力するときに表示したい数にsearchResultLimitを設定することです。私たちの例では、上位6件の結果のみを表示したいと考えています。

これで完了です！ 結果が見つからない場合に表示されるテキストも変更したいですか？ モダンなドロップダウンフィールドで「結果が見つかりません」というテキストを変更する方法のチュートリアルをご覧ください。

参照フィルター

wpforms_field_select_choicesjs_config

よくある質問

Q: ドロップダウンで選択できる項目を2つだけに制限できますか？

A: もちろんです！ まず、モダンなドロップダウンフィールドを編集し、高度な設定タブで複数のオプションを選択を有効にするオプションを切り替えます。

このオプションを有効にしたら、このスニペットをサイトに追加できます。

/**
 * 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 );

Q: 検索結果をより正確な一致にするにはどうすればよいですか？

A: しきい値の値を変更して、検索をより具体的にすることができます。このスニペットをサイトに追加するだけです。

/**
 * 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 );