ドロップダウンに検索ボックスを追加するWordpress

Question

私はWoocommerceを使用しており、ユーザーが選択する必要がある500の町や都市のドロップダウンを含むようにTowns/Citiesチェックアウトフォームを編集しました。検索ボックスを実装して、自分の町を検索できるようにするにはどうすればよいですか？このため

：

私は次のコード

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

これを使用して、Woocommerceにそのフィールドをカスタマイズしています。基本的

、どのように私はこのような何かを作成してくださいあなたが使いたいプラグインは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>