使用 jquery 在 asp.net 中自动完成答案

【问题标题】：Auto complete in asp.net using jquery使用 jquery 在 asp.net 中自动完成
【发布时间】：2015-11-03 06:39:00
【问题描述】：

在这里，我尝试在 asp.net 中使用 jquery 自动完成功能，尝试从 sql 数据源中检索数据并将其用于自动获取。虽然我运行代码自动完成没有工作。

我的代码

<script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $(".autosuggest").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Inventory.aspx/GetAutoCompleteData",
                        data: "{'username':'" + document.getElementById('txtPartno').value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        }
</script>

文本框字段

<asp:TextBox ID="txtPartno" CssClass="Textboxbase" class="autosuggest" runat="server"></asp:TextBox>

还有我的 c# 代码

protected void Page_Load(object sender, EventArgs e)
{

}
[WebMethod]

public static List<string> GetAutoCompleteData(string username)
{
    List<string> result = new List<string>();
    using (SqlConnection con = new SqlConnection("Data Source=MYPC-GN\\KASPLDB;Integrated Security=False;User ID=sa;Password=*****;Connect Timeout=15;Encrypt=False;TrustServerCertificate=False"))
    {
        using (SqlCommand cmd = new SqlCommand("select DISTINCT PART_NO from Inventory where UserName LIKE '%'+@SearchText+'%'", con))
        {
            con.Open();
            cmd.Parameters.AddWithValue("@SearchText", username);
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                result.Add(dr["UserName"].ToString());
            }
            return result;
        }
    }
 }

【问题讨论】：

你遇到了什么错误？
没有错误，但没有按预期检索数据。
你的GetAutoCompleteData 被击中了吗？
好像不行，有什么办法可以检查（调试）
您能否确保您在 C# 中描述的函数通过放置断点来命中？

标签： javascript c# jquery asp.net sql-server

【解决方案1】：

我认为您的 TextBox 连接不正确。试试这个：

<asp:TextBox ID="txtPartno" CssClass="Textboxbase autosuggest" runat="server"></asp:TextBox>

然后在你的 JavaScript 中试试这个：

$(".autosuggest").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Inventory.aspx/GetAutoCompleteData",
                    data: "{'username':'" + request.term + "'}",
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }
        });

【讨论】：

【解决方案2】：

我做了如下：

ajaxCallSetting.js

var ajaxCallSetting = function (element, message, req) {
    var baseInfo = {        
        baseUrl: "http://localhost:10266/"
    };
    var buildUrl= function() {
        return baseInfo.baseUrl + message;
    };

    var callApi = function(request, response) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: buildUrl(),
            data: JSON.stringify(req),
            dataType: "json"
        }).success(function(data) {
            response(data.d);
        });
    };
    
    return {
        init: function() {
            $(element).autocomplete({
                source: callApi
            });
        } 
    };
};

头部标签：

<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
    <script src="ajaxCallSetting.js"></script>
    <link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            var req = {
                 username: $('#txtPartno').val()
            };
            apiSettings('#txtPartno', "Default.aspx/GetAutoCompleteData", req).init();
        });
    </script>
</head>

尽可能，将 HTML 代码与 JavaScript 中的代码分开是很有用的。

【讨论】：

【解决方案3】：

首先，您应该检查是否调用了 JavaScript 函数。如果它被调用，那么您应该检查 url 是否正确。您可以在开发者工具/萤火虫等中查看您发送的请求。

【讨论】：

【解决方案4】：

我可以看到的一个问题是您的 javascript 调用有点错误。您无法获取由 asp 本身使用document.getElementById('txtPartNo') 创建的文本框的值。要获取此值，您必须获取它的客户端 ID，您可以使用它 - txtPartNo.ClientID 所以最后会变成-

data: "{'username':'" + document.getElementById('<%= txtPartno.ClientID %>').value + "'}",

如果您不尝试这种方式，那么您将无法获得该文本框的实际值，并且undefined 将被发送到不会返回任何内容的 C# 方法。

【讨论】：

试过了，还是没有数据，，，
可以添加ScriptMethod(ResponseFormat = ResponseFormat.Json)的属性吗？