集成phpspellcheck API后Autocomplete报key undefined，求执行顺序调整方法

你猜的完全没错！问题的核心就是phpspellcheck的AjaxDidYouMean是异步操作——你现在的代码里，调用完这个拼写检查方法后立刻就去打印key、执行Ajax请求，但这时候onDidYouMean回调还没被触发，key变量根本还没被赋值，自然会报"key is undefined"的错误。

要解决这个问题，你需要把Ajax请求挪到拼写检查完成后的回调函数里执行，也就是onDidYouMean内部，这样就能保证拿到拼写检查后的正确关键词，再发起搜索请求。

下面是修改后的完整代码，我标注了关键的调整点：

$("#school-searchbox-wrapper > .search").autocomplete({
    source: function (request, response) {
        var originalKeys = request.term; // 先保存用户的原始输入内容
        var mySpellInstance = new LiveSpellInstance();
        
        mySpellInstance.AjaxDidYouMean(request.term);
        mySpellInstance.onDidYouMean = function(suggestion, original){
            // 只有拼写检查API返回结果后，才会进入这个回调函数
            var key = suggestion !== "" ? suggestion : originalKeys;
            
            // 在这里发起Ajax请求，确保已经拿到了正确的key值
            $.ajax({
                // 去掉async: false，同步请求会阻塞页面，完全没必要
                url: SITE_URL + "books/search/school",
                dataType: "json",
                data: { q: key },
                success: function (data) {
                    console.log(data);
                    response(data.response); // 把搜索结果传给Autocomplete组件
                }
            });
        };
    },
    focus: function (event, ui) {
        // $( "#search" ).val( ui.item.title ); // uncomment this line if you want to select value to search box
        return false;
    },
    select: function (event, ui) {
        window.location.href = "book-detail.php?id=" + ui.item.id;
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    var inner_html = "<div class='ui-menu-item-wrapper'>" + item.name + "</div>";
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append(inner_html)
        .appendTo(ul);
};

关键修改说明： #

1. 调整代码执行顺序：把Ajax请求完全移入onDidYouMean回调，确保只有拼写检查完成后才会发起搜索请求
2. 修复变量作用域问题：原来的key是回调内部的局部变量，外部无法访问，现在直接在回调内使用它发起请求，彻底避免undefined的错误
3. 移除同步请求设置：async: false会导致页面卡顿，现在我们在异步回调里执行请求，完全不需要同步模式，用户体验更好

这样修改后，就能保证拼写检查API返回结果后，再触发Autocomplete的Ajax搜索请求，完美解决你遇到的问题。

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