Question

<asp:TextBox runat="server" ID="txtPInf" Width="60" placeholder="PartnerId" autocomplete="off"/>

我知道我可以使用<ajax:AutoCompleteExtender>，但你能推荐我一个jquery替代品吗？

Answer 1

最简单的是jQuery UI's AutoComplete

Answer 2

要在asp.net web项目中使用它，你可以看看at this解决方案，这基本上适用于jquery和web方法的原理。

您可以使用Jquery内置的自动完成功能，从这里查看指南https://jqueryui.com/autocomplete/

Answer 3

在.aspx页面中添加脚本引用并调用JQuery AutoComplete插件

我创建了一个新网站，并在default.aspx页面中添加了以下代码。

注意：我已根据您的要求“TextBox”

完成此操作

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery AutoComplete TextBox Demo</title>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
</head>
<body>
<form id="form1" runat="server">
<div><h1>AutoComplete Textbox</h1>
City:
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</div>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#txtCity").autocomplete({
source: function (request, response) {
var param = { cityName: $('#txtCity').val() };
$.ajax({
url: "Default.aspx/GetCities",
data: JSON.stringify(param),
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) {
alert(textStatus);
}
});
},
minLength: 2//minLength as 2, it means when ever user enter 2 character in   TextBox the AutoComplete method will fire and get its source data. 
});
});
</script>
</body>
</html>

从NorthWind数据库获取城市的WebMethod

我在default.aspx.cs中添加了一个WebMethod“GetCities”来在JQuery自动完成源中调用它

[WebMethod]
public static List<string> GetCities(string cityName)
{
    List<string> City = new List<string>();
    string query = string.Format("SELECT DISTINCT City FROM Customers WHERE City LIKE '%{0}%'", cityName);
    //Note: you can configure Connection string in web.config also.
    using (SqlConnection con = new SqlConnection(@"Data Source = .\SQLEXPRESS2008R2; initial Catalog = NORTHWND; Integrated Security = true"))
    {
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            con.Open();
            SqlDataReader reader = cmd.ExecuteReader();
            while (reader.Read())
            {
                City.Add(reader.GetString(0));
            }
        }
    }
    return City;
}

来源：Dotnetcodepress

Answer 4

对于jQuery自动填充，您需要添加以下CSS和js文件。

的jquery-ui.css
的jquery-x.xx.x.js
的jquery-ui.js

您可以从jQuery网站下载这些文件 - https://jquery.com/download/

<div class="ui-widget">
  <label for="lblName">Name: </label>
  <input id="Names">
</div>

<script>
  $(function() {
    var arrNames = [
      "A",
      "Abc",
      "Abcd",
      "Bcd",
      "d"
    ];
    $( "#Names" ).autocomplete({
      source: arrNames
    });
  });
  </script>

使用jquery自动完成文本框

4 个答案: