选择下拉列表后，WooCommerce Checkout Country 字段将自动聚焦其搜索输入答案

【问题标题】：WooCommerce Checkout Country field to Autofocus its search input once dropdown is selected选择下拉列表后，WooCommerce Checkout Country 字段将自动聚焦其搜索输入
【发布时间】：2021-11-12 06:29:16
【问题描述】：

我刚开始使用 PHP，我想自定义与 Country 下拉列表相关的 Woocommerce Checkout 字段。我不知道我必须在哪里访问该字段的代码以及如何为其设置侦听器。

问题是一旦我打开国家下拉字段，我必须手动单击其搜索输入才能搜索国家。我需要使这个搜索输入成为焦点，所以一旦用户打开下拉列表，他/她就可以通过输入进行搜索，而无需点击输入。

我知道这肯定不够详细，因为这里没有代码 sn-ps。但任何帮助在这里表示赞赏。谢谢。

【问题讨论】：

标签： php input woocommerce hook-woocommerce autofocus

【解决方案1】：

这是 select2 的问题 - https://github.com/select2/select2/issues/5993

问题有解决办法。这是解决方案之一，因为我们在默认结帐表单上有多个选择。创建 js 文件，在其中添加您的 js 代码。例如，我的文件将位于 mythemefolder/assets/js/select2fix.js

在你的 functions.php 文件中添加这个

function theme_checkout_select2fix() {
    // I need this only on checkout page. Change this if you need to load it to different pages.
    if(is_checkout()):
        wp_enqueue_script( 'select2fix', get_template_directory_uri() . '/assets/js/select2fix.js', array('jquery'));
    endif;
}
add_action( 'wp_enqueue_scripts', 'theme_checkout_select2fix' );

把它放在你的 select2fix.js 文件中

jQuery(function($) {
    $(document).on('select2:open', () => {
        let allFound = document.querySelectorAll('.select2-container--open .select2-search__field');
        allFound[allFound.length - 1].focus();
    });
});

【讨论】：

非常感谢，朋友。绝对是正确的解决方案。