WordPress中如何让jQuery UI AutoComplete搜索建议按字母优先排序？

搞定这个需求其实不难，核心就是区分顶级品牌和子分类术语，根据用户输入的关键词长度来调整返回结果的优先级。我给你一套前后端结合的解决方案，亲测有效：

一、后端AJAX接口改造（WordPress端） #

我们需要自定义一个AJAX接口，用来根据输入长度和匹配规则返回对应的分类术语：

// 注册AJAX接口，支持登录和未登录用户
add_action('wp_ajax_get_brand_terms', 'get_brand_terms');
add_action('wp_ajax_nopriv_get_brand_terms', 'get_brand_terms');

function get_brand_terms() {
    // 过滤用户输入的搜索关键词
    $search_term = isset($_GET['term']) ? sanitize_text_field($_GET['term']) : '';
    $term_length = strlen($search_term);
    
    // 基础查询参数
    $args = array(
        'taxonomy' => 'sport_brands', // 替换成你的自定义分类法名称
        'hide_empty' => false,
        'orderby' => 'name',
        'order' => 'ASC',
        'name__like' => $search_term, // 模糊匹配关键词
    );

    // 根据输入长度调整返回逻辑
    if ($term_length <= 1) {
        // 输入1个字符时，只返回顶级品牌（父ID为0的术语）
        $args['parent'] = 0;
        $terms = get_terms($args);
    } else {
        // 输入2个及以上字符时，返回所有匹配项，但让顶级品牌排在最前面
        $all_terms = get_terms($args);
        
        // 分离顶级品牌和子术语
        $top_brands = [];
        $child_terms = [];
        foreach ($all_terms as $term) {
            if ($term->parent === 0) {
                $top_brands[] = $term;
            } else {
                $child_terms[] = $term;
            }
        }
        
        // 合并：顶级品牌在前，子术语在后
        $terms = array_merge($top_brands, $child_terms);
    }

    // 整理成AutoComplete需要的格式
    $response = [];
    foreach ($terms as $term) {
        $response[] = [
            'label' => $term->name, // 显示在下拉框的文本
            'value' => $term->name, // 选中后填充到输入框的值
            'term_id' => $term->term_id // 可选：返回分类ID，方便后续操作
        ];
    }

    wp_send_json($response);
    wp_die(); // 必须终止AJAX请求
}

后端代码说明： #

• 替换sport_brands为你实际的自定义分类法名称；
• 输入1个字符时，只返回顶级品牌，避免子术语淹没其他品牌；
• 输入2个及以上字符时，先展示匹配的顶级品牌，再展示对应的子术语；
• 如果需要开头匹配（而不是模糊包含），可以把name__like替换为正则匹配：

  'name__regex' => '^' . preg_quote($search_term, '/'),
  'name__regex_flags' => 'i' // 忽略大小写
  

二、前端AutoComplete配置 #

修改你的前端JS代码，调用上面的AJAX接口：

jQuery(document).ready(function($) {
    // 替换成你的搜索输入框ID
    $('#brand-search-input').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: ajaxurl, // WordPress全局AJAX地址，无需修改
                type: 'GET',
                data: {
                    action: 'get_brand_terms', // 对应后端注册的AJAX动作名
                    term: request.term // 用户输入的关键词
                },
                success: function(data) {
                    response(data); // 将后端返回的数据传给AutoComplete
                }
            });
        },
        minLength: 1, // 输入1个字符就触发搜索
        select: function(event, ui) {
            // 选中选项后的自定义逻辑，比如跳转或填充
            $(this).val(ui.item.label);
            return false; // 阻止默认行为，避免输入框被填充value字段（如果label和value不同的话）
        },
        open: function() {
            // 可选：打开下拉框时的样式调整
            $(this).removeClass('ui-corner-all').addClass('ui-corner-top');
        },
        close: function() {
            $(this).removeClass('ui-corner-top').addClass('ui-corner-all');
        }
    });
});

前端代码说明： #

• 替换#brand-search-input为你的搜索输入框实际ID；
• 保持ajaxurl不变，WordPress会自动为前端注入这个全局变量；
• minLength:1确保输入单个字符就触发搜索，符合你的需求。

三、测试效果 #

• 输入a：下拉框只会显示Adidas、Amphipod、Asics等顶级品牌，按字母排序；
• 输入ad：下拉框先显示Adidas，再显示Adidas Shoes、Adidas Socks等子术语；
• 输入am：则会先显示Amphipod，再展示它的子术语（如果有的话）。

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