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

本文关键字：net jquery asp 使用 | 更新日期: 2023-09-27 18:07:25

这里我试图在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;
        }
    }
 }

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

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

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

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

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

我这样做了:

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代码分开是很有用的。

我不认为你的文本框连接正确。试试这个:

<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");
                    }
                });
            }
        });
相关文章：