html - 将搜索框添加到下拉 Wordpress

Question

我正在使用 Woocommerce 并编辑了 Towns/Cities 结帐表单，以包含我需要用户从中选择的 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 库。您可以在主题 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>