WordPress中Chosen搜索下拉框8200条数据加载缓慢求解决方案

快速解决：PHP限制下拉选项到100条 #

直接在ae_tax_dropdown的参数里加number字段，就能限制加载的选项数量，同时记得关掉Chosen的搜索禁用属性，让用户能在这100条里搜索：

修改后的代码：

<div class="fre-input-field">
    <label class="fre-field-title" for="project-location"><?php _e('Location (optional)', ET_DOMAIN);?></label>
    <?php
        ae_tax_dropdown( 'country' ,array(
                'attr'            => 'data-chosen-width="100%" data-placeholder="'.__("Choose country", ET_DOMAIN).'"',
                'class'           => 'fre-chosen-single',
                'hide_empty'      => false,
                'hierarchical'    => true ,
                'id'              => 'country',
                'orderby'         => 'id',
                'order'           => 'ASC',
                'show_option_all' => __("Choose country", ET_DOMAIN),
                'number'          => 100 // 限制只加载100条国家选项
            )
        );
    ?>
</div>

注：number是WordPress原生wp_dropdown_categories支持的参数，ae_tax_dropdown作为封装函数应该兼容这个参数。

彻底优化：AJAX动态加载选项（适合需要全量搜索的场景） #

如果不想限制选项数量，而是要保留所有8200条但加快加载，就用AJAX实现用户输入搜索词后再动态拉取匹配结果，初始页面只加载空的下拉框：

第一步：修改前端代码 #

<div class="fre-input-field">
    <label class="fre-field-title" for="project-location"><?php _e('Location (optional)', ET_DOMAIN);?></label>
    <select id="country" class="fre-chosen-single" data-chosen-width="100%" data-placeholder="<?php _e("Choose country", ET_DOMAIN);?>"></select>
</div>

<script>
jQuery(document).ready(function($) {
    $('#country').chosen({
        width: '100%',
        placeholder_text_single: '<?php _e("Choose country", ET_DOMAIN);?>',
        no_results_text: '<?php _e("No country found", ET_DOMAIN);?>',
        ajax: {
            url: '<?php echo admin_url('admin-ajax.php');?>',
            type: 'POST',
            dataType: 'json',
            data: function(term, page) {
                return {
                    action: 'fetch_countries',
                    search_term: term,
                    page: page
                };
            },
            results: function(data) {
                return {
                    results: data
                };
            },
            search_delay: 300 // 延迟300ms再发请求，减少无效查询
        }
    });
});
</script>

第二步：在主题functions.php里添加AJAX处理函数 #

// 前台AJAX获取国家列表（登录/未登录用户都能调用）
add_action('wp_ajax_fetch_countries', 'fetch_countries');
add_action('wp_ajax_nopriv_fetch_countries', 'fetch_countries');

function fetch_countries() {
    $search_term = isset($_POST['search_term']) ? sanitize_text_field($_POST['search_term']) : '';
    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $per_page = 50; // 每次加载50条，避免一次性返回太多数据

    $args = array(
        'taxonomy'      => 'country',
        'hide_empty'    => false,
        'hierarchical'  => true,
        'orderby'       => 'id',
        'order'         => 'ASC',
        'number'        => $per_page,
        'offset'        => ($page - 1) * $per_page,
        'search'        => $search_term // 根据用户输入的关键词过滤结果
    );

    $countries = get_terms($args);
    $results = array();

    foreach ($countries as $country) {
        $results[] = array(
            'id'   => $country->term_id,
            'text' => $country->name
        );
    }

    wp_send_json($results);
    wp_die(); // 必须加，终止AJAX请求
}

额外优化建议 #

• 给WordPress配置对象缓存（比如Redis、Memcached），缓存get_terms的查询结果，减少数据库压力。
• 如果不需要层级显示国家，把hierarchical设为false，简化DOM结构，加快Chosen渲染速度。
• 延迟Chosen初始化：比如等用户点击下拉框时再初始化，减少页面初始加载时的JS执行时间。

内容的提问来源于stack exchange，提问作者victor