将搜索框添加到下拉列表Wordpress

Question

我正在使用Woocommerce并编辑了城镇/城市结帐表单，其中包括我需要用户选择的500个城镇和城市的下拉列表。如何实施搜索框，以便他们能够搜索他们的城镇？

基本上，我该如何创建这样的东西：

为此：

我使用以下代码

在Woocommerce中自定义该字段

add_filter( 'woocommerce_default_address_fields' , 'customize_checkout_city_field' );
function customize_checkout_city_field( $address_fields ) {

    // Set HERE the cities (one line by city)
    $towns_cities_arr = array(
        '0' => __('Select your city', 'my_theme_slug'),
        'paris' => 'Paris',
        'versailles' => 'Versailles',
        'cannes' => 'Cannes',
    );

    // Customizing 'billing_city' field
    $address_fields['city']['type'] = 'select';
    $address_fields['city']['class'] = array('form-row-last', 'my-custom-class'); // your class here
    $address_fields['city']['label'] = __('Town / city', 'my_theme_slug');
    $address_fields['city']['options'] = $towns_cities_arr;


    // Returning Checkout customized fields
    return $address_fields;

}

Answer 1

您要使用的此插件是Select2 https://select2.github.io/examples.html

您的字段上已有自定义类名为my-custom-class

您需要做的就是导入select2 libs。您可以在主题functions.php。

中执行此操作

function mytheme_enqueue_custom_scripts() {

    wp_enqueue_style( 'select2-css', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' );

    wp_enqueue_script( 'select2-js', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js' );

}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_custom_scripts' );

然后添加一些jQuery来初始化它。

<script type="text/javascript">

    jQuery(document).ready(function( $ ) {
      $(".my-custom-class").select2();
    });

</script>