WordPress表单基于JSON文件的jQuery自动补全无结果无报错求助

看起来你已经搭好了基础框架，但没看到补全提示又没报错，大概率是几个容易忽略的细节出了问题。我来帮你一步步排查和修复：

先排查最容易踩坑的基础环节 #

1. 确认JSON文件路径是否正确 #

你写的'global.json'是相对路径，很可能找不到文件。打开浏览器开发者工具（F12）→「网络」标签，搜索global.json，看看请求状态是不是200。如果是404，那就是路径错了：

• 要是JSON文件在WordPress主题目录里，建议用PHP输出绝对路径避免出错，比如在functions.php里本地化脚本：

  function enqueue_custom_scripts() {
      wp_enqueue_script( 'custom-autocomplete', get_template_directory_uri() . '/js/autocomplete.js', array('jquery'), '1.0', true );
      // 把JSON文件的绝对路径传递给JS
      wp_localize_script( 'custom-autocomplete', 'autocompleteData', array(
          'jsonUrl' => get_template_directory_uri() . '/global.json'
      ) );
  }
  add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );
  

  之后JS里用autocompleteData.jsonUrl代替硬编码的路径即可。

2. 检查JSON文件格式是否合法 #

JSON对语法要求很严格，不能有 trailing 逗号，字符串必须用双引号。比如正确的格式应该是：

[
    {"name": "宫保鸡丁", "price": 28},
    {"name": "鱼香肉丝", "price": 26},
    {"name": "麻婆豆腐", "price": 18}
]

可以在浏览器控制台用JSON.parse('你的JSON内容')测试，看是否会抛出语法错误。

3. 确认DOM元素存在且ID唯一 #

在控制台输入$('#dish')和$('#result')，如果返回的jQuery对象长度为0，说明元素不存在或者ID重复了。一定要确保这两个元素的ID在页面中是唯一的。

修正并优化你的JS代码 #

你的代码写到jQuery.getJSON('global.json', function(data){ j...就中断了，明显缺少遍历匹配结果的核心逻辑。我给你补全并做了优化：

jQuery(document).ready(function($) {
    // 加防抖函数，避免用户每输入一个字符就发一次请求
    let debounceTimer;
    $('#dish').on('input', function(){
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            const searchField = $(this).val().trim();
            $('#result').html('');
            
            // 输入为空时直接返回，无需发起请求
            if (searchField.length < 1) return;
            
            // 使用本地化的绝对路径，避免相对路径问题
            $.getJSON(autocompleteData.jsonUrl, function(data) {
                // 假设你的JSON是菜品对象数组，每个对象包含name字段
                const matches = data.filter(item => {
                    return new RegExp(searchField, "i").test(item.name);
                });
                
                if (matches.length > 0) {
                    // 将匹配项拼接成HTML插入到#result中
                    const resultHtml = matches.map(item => 
                        `<div class="autocomplete-item">${item.name}</div>`
                    ).join('');
                    $('#result').html(resultHtml);
                    
                    // 可选：点击补全项自动填充到输入框
                    $('.autocomplete-item').on('click', function() {
                        $('#dish').val($(this).text());
                        $('#result').html('');
                    });
                }
            })
            // 添加失败回调，终于能看到具体报错了！
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log('JSON请求出错:', textStatus, errorThrown);
            });
        }, 300); // 300ms延迟，平衡响应速度和请求次数
    });
});

别忘了给补全提示加样式！ #

很多时候补全提示已经生成了，但因为没有样式看不到。给#result加个基础样式：

#result {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    width: 220px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 9999;
    margin-top: 2px;
}
.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
}
.autocomplete-item:hover {
    background-color: #f5f5f5;
}

按这个步骤走，应该就能看到补全提示了。如果还是有问题，看控制台的fail回调输出，就能明确知道具体哪里出错了。

内容的提问来源于stack exchange，提问作者Stefano Baù