[英]JQuery autocomplete from database with asp.net
Hi I have a text field on my web form and would like to utilise the jquery autocomplete functionality to show a list of possible values when the users starts typing. 嗨,我的网络表单上有一个文本字段,当用户开始输入内容时,我想利用jquery的自动完成功能显示可能值的列表。
I have looked at loads of tutorials online and I understand the basic ones that have an array of values in the javascript. 我在线上查看了许多教程,并且了解了在JavaScript中具有一系列值的基本教程。 However I would like the values available to my text box to be defined by an SQL query.
但是,我希望文本框可用的值由SQL查询定义。
I have browsed stackoverflow and all the answers seem to use php, but I am building my site using asp.net and C# and I have absolutely no php experience. 我浏览了stackoverflow,所有答案似乎都使用php,但是我正在使用asp.net和C#构建我的网站,而且我绝对没有php经验。
I have tried working through the following examples online but have come to dead ends for one reason or another. 我尝试过在线处理以下示例,但由于某种原因而陷入僵局。
Does anybody know of a good step by step tutorial that can guide me through the process? 有人知道一个很好的分步指南可以指导我完成该过程吗?
Thanks 谢谢
You haven't provided that what you tried, so assuming and creating a sample as per your requirement. 您没有提供所尝试的内容,因此可以根据需要假设并创建样本 。 I have taken a good reference from here
我从这里得到了很好的参考
So here we go:- 所以我们开始:-
Firstly, you need to create a database for your data to be fetched from. 首先,您需要创建一个数据库以便从中获取数据。 for that you need to create a
connection string
. 为此,您需要创建一个
connection string
。 The below one is the sample in which I have used the Northwind database
以下是我使用
Northwind database
的示例
<connectionStrings>
<addname="constr"connectionString="Data Source = .\SQLExpress;
Initial Catalog = Northwind; Integrated Security = true"/></connectionStrings>
Secondly, we will also be needing a handler in this case which will handle your request of AutoComplete 其次,在这种情况下,我们还将需要一个处理程序,该处理程序将处理您的AutoComplete请求
<%@ WebHandler Language="C#" Class="Search_CS" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
public class Search_CS : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string prefixText = context.Request.QueryString["q"];
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select ContactName from Customers where " +
"ContactName like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
cmd.Connection = conn;
StringBuilder sb = new StringBuilder();
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
sb.Append(sdr["ContactName"])
.Append(Environment.NewLine);
}
}
conn.Close();
context.Response.Write(sb.ToString());
}
}
}
public bool IsReusable {
get {
return false;
}
}}
After that, you need to call the javascript function in your aspx page, so that your autocomplete
part will work. 之后,您需要在aspx页面中调用javascript函数,以便您的
autocomplete
部分可以正常工作。
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="scripts/jquery.autocomplete.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#<%=txtSearch.ClientID%>").autocomplete('Search_CS.ashx'); }); </script>
<form id="form1" runat="server"> <div> <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox> </div> </form>
That's the thing which you need to implement. 那就是您需要实现的东西。
Below is the image it will look like, 下面是它的外观图,
Also see the plugin documentation related. 另请参阅相关的插件文档。
https://api.jqueryui.com/autocomplete/ https://api.jqueryui.com/autocomplete/
Jquery autocomplete category. jQuery自动完成类别。
https://jqueryui.com/autocomplete/#categories https://jqueryui.com/autocomplete/#categories
If you get stuck in these, kindly let us know. 如果您陷入这些困境,请告诉我们。 We will be glad to help you out.
我们很高兴为您提供帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.