我的 jquery 自动完成功能不起作用

Posted 2023-05-08

【中文标题】我的 jquery 自动完成功能不起作用

【英文标题】：my jquery autocomplete not working

【发布时间】：2016-01-12 05:05:12

【问题描述】：

我使用 jquery 为文本框创建自动完成功能，从 asmx 网络服务中获取数据。我在 firebug 上监控我的代码，这个工具显示发送的请求和收到的 xml 响应。但文本框的自动完成功能未打开:( 有人可以告诉我为什么我的 jquery 自动完成代码不起作用吗？ jQuery代码：

<link href="../Script/MainCSS.css" rel="stylesheet" />
<link href="../Script/jquery-ui.css" rel="stylesheet" />
<script src="../Script/jquery-1.10.2.js"></script>
<script src="../Script/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () 
        $('.textBox').autocomplete(
            source: function (request, response)                
                $.ajax(
                    url: "/Services/BusService.asmx/GetRouteInfo",
                    data:  param: $('.textBox').val() ,
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data)  return data; ,
                    success: function (data) 
                        response($.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: 2 //This is the Char length of inputTextBox  
        );
    );
</script>

我的 C# 代码：

 [WebMethod]
        public string[] GetRouteInfo(string param)
        
            List<string> list_result = new List<string>();

            AutoTaxiEntities useEntity = new AutoTaxiEntities();

            System.Data.Entity.Core.Objects.ObjectResult<DAL.Model.SP_FIND_ROUTE_ROUTESTOPS_Result> sp_result = useEntity.SP_FIND_ROUTE_ROUTESTOPS(param);

            foreach (DAL.Model.SP_FIND_ROUTE_ROUTESTOPS_Result sp_result_item in sp_result.ToList())
            
                list_result.Add(sp_result_item.ID + "," + sp_result_item.ITEMTYPE + "," + sp_result_item.TITLE);
            

            return list_result.ToArray();

        

【问题讨论】：

成功回调是否被调用？检查您的浏览器控制台是否有任何错误

无错误，xml 响应来自 asmx 但文本框未打开自动完成

显示文本框的 .aspx 标记

你收到alert？

【参考方案1】：

查看您添加的脚本引用，我认为您尚未添加 autocomplete.js 脚本。请添加并尝试一次。Please click here

【讨论】：

在 jquery-ui,min.js 中是否可用？？

不，需要单独添加自动补全插件的引用。

jquery.autocomplete 在 jquery.ui 中可用 :)

【参考方案2】：

 $(document).ready(function () 
        $('#<%=txtSearch.ClientID%>').autocomplete(
            source: function (request, response) 
                $.ajax(
                    type: "POST",
                    url: "/Services/BusWebService.asmx/GetRouteInfo",
                    data: " 'param': '" + request.term + "' ",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data)  return data; ,
                    success: function (data) 
                        response($.map(data.d, function (item) 
                            return 
                                itemid: item.split(',')[0],
                                itemtype: item.split(',')[1],
                                label: item.split(',')[2]
                            
                        ))
                    ,
                    error: function (XMLHttpRequest, textStatus, errorThrown) 
                        alert(textStatus);
                    
                );
            ,
            minLength: 2,
            select: function (event, ui) 
                $('#<%=hfItem.ClientID%>').val(ui.item.itemid + ',' + ui.item.itemtype + ',' + ui.item.label);
                //$("form").submit();
            
        );
  );