如何使用jquery在asp.net中为文本框自动完成

时间:2017-01-28 05:06:51

标签: javascript c# asp.net ajax

.aspx页面中添加名称为ProductType的控件,控件属于文本框类型

[WebMethod(EnableSession = true)]
    public static List<string> GetAutoCompleteDataProduct(string ProductType)
    {
        // string pid = "";
        ProductMasterBL objProductMasterBl = new ProductMasterBL();
        DataTable dtSearchProducts = objProductMasterBl.GetProductTypes(ProductType);
        List<string> result = new List<string>();
        for (int i = 0; i < dtSearchProducts.Rows.Count; i++)
        {
            result.Add(dtSearchProducts.Rows[i]["ProductName"].ToString());
        }
        if (result.Count == 0)
        {
            result.Add("No match found.");
        }
        return result;
    }

代码背后的代码:

$(document).ready(function () {
SearchText();
});
function SearchText() {
   // var txtSearch = document.getElementById('txtProductType');
    $("#txtProductType").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Customers.aspx/GetAutoCompleteDataProduct",
                data: "{'ProductType':'" + request.term +"'}",
                dataType: "json",
                success: function (data) {
                    response(data.d);
                },
                error: function (result) {
                    alert("Error");
                },
                focus: function () {
                    // prevent value inserted on focus
                    return false;
                },
            });
        }
    });
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

上面的代码都属于代码背后的代码,JavaScript代码和用于脚本函数的链接

1 个答案:

答案 0 :(得分:0)

只需使用此代码

参考...........

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

.aspx代码控制

<asp:TextBox ID="textBox" runat="server" OnTextChanged="textBox_TextChanged" AutoPostBack="true" class="form-control"></asp:TextBox>
                    <cc1:AutoCompleteExtender ServiceMethod="SearchAutoComplete"
                        MinimumPrefixLength="1"
                        CompletionInterval="100" EnableCaching="False"
                        TargetControlID="textBox"
                        ID="AutoCompleteExtender1" runat="server" DelimiterCharacters="" Enabled="True" ServicePath="">
                    </cc1:AutoCompleteExtender>

.CS代码

[System.Web.Script.Services.ScriptMethod()]
        [System.Web.Services.WebMethod]
        public static List<string> SearchAutoComplete(string prefixText, int count)
        {
            using (var _context = new Entities())
            {
                var Q = from lcN in _context.table                                     
                               where (lcN.Name.Contains(prefixText))
                               select lcN;
                List<String> List= new List<String>();
                foreach (var Qr in Q )
                {
                    List.Add(Qr.Q );
                }
                return List;
            }
        }