jQuery 3.2.1实现Autocomplete报错：dollar(...).autocomplete不是函数求助

我看到你遇到的Uncaught TypeError: dollar(...).autocomplete is not a function错误，本质原因很明确：autocomplete并不是jQuery核心库自带的方法，它是jQuery UI组件库中的专属功能。你目前的代码只引入了jQuery，但缺少对应的jQuery UI支持，同时代码里还有一处小的变量混用问题，下面一步步帮你解决：

第一步：引入兼容的jQuery UI库 #

因为你用的是jQuery 3.2.1，需要搭配兼容的jQuery UI版本（推荐1.12.x系列，这个版本完美适配jQuery 3.x）。在你的页面中，必须保证引入顺序正确：

• 先加载你现有的jQuery 3.2.1文件（保持原引入方式不变）
• 再加载jQuery UI的JavaScript文件（本地资源，版本选1.12.x即可）
• 可选：加载jQuery UI的CSS样式文件，让Autocomplete的下拉列表显示正常的界面样式

第二步：修正代码中的$和dollar混用问题 #

你用了$.noConflict()把jQuery对象赋值给了dollar变量，但在ajax的success回调里还是用了$.map，这会导致潜在的冲突（如果页面有其他库占用$标识符的话），同时也建议把$('#txtDoctorLocation').val()改成dollar("#txtDoctorLocation").val()，统一使用dollar来调用jQuery方法：

修改后的前端JS代码：

<script type="text/javascript"> 
var dollar = $.noConflict(); 
dollar(function () { 
    dollar("#txtDoctorLocation").autocomplete({ 
        source: function (request, response) { 
            var param = { query: dollar("#txtDoctorLocation").val() }; 
            dollar.ajax({ 
                url: "./verification.aspx/SearchDoctor", 
                data: JSON.stringify(param), 
                dataType: "json", 
                type: "POST", 
                contentType: "application/json; charset=utf-8", 
                dataFilter: function (data) { return data; }, 
                success: function (data) { 
                    response(dollar.map(data.d, function (item) { 
                        return { value: item } 
                    })) 
                }, 
                error: function (XMLHttpRequest, textStatus, errorThrown) { 
                    var err = eval("(" + XMLHttpRequest.responseText + ")"); 
                    alert(err.Message) 
                    console.log("Ajax Error!"); 
                } 
            }); 
        }, 
        minLength: 1 
    }); 
}); 
</script>

第三步：验证后端WebMethod（确保逻辑正常） #

你的后端WebMethod代码逻辑是没问题的，格式化后如下（可以把重复的Test1改成不同值方便测试）：

[WebMethod] 
public static List<string> SearchDoctor(string query) { 
    List<string> Doc = new List<string>(); 
    Doc.Add("Test1"); 
    Doc.Add("Test2"); 
    Doc.Add("Test3"); 
    Doc.Add("Test4"); 
    return Doc; 
}

完成以上三步后，Autocomplete功能应该就能正常工作了，而且不需要降级jQuery，完全不会影响你项目里的其他现有功能。

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