Question

我试图在asp.net中使用jquery auto complete，我试图从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;
        }
    }
 }

Answer 1

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

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

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

Answer 2

首先，您应该检查它是否被调用的JavaScript函数。如果它被调用，那么你应该检查网址是否正确。您可以检查开发人员工具/ firebug等，以查看您发送的请求。

Answer 3

我做了如下：

<强> ajaxCallSetting.js

＆＃13;

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
            });
        } 
    };
};

＆＃13;

标题：

＆＃13;

<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>

＆＃13;

尽可能使用JavaScript中的代码保持单独的Html代码非常有用。

Answer 4

我认为你的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");
                    }
                });
            }
        });

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

4 个答案: