jquery autocomplete实现读取sql数据库自动补全TextBox

简介:

转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox

项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下。

1.前台页面

复制代码
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>  
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head id="Head1" runat="server">  
        <title></title>  
        <script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>  
        <script src="jquery.autocomplete.js" type="text/javascript"></script>  
        <link href="jquery.autocomplete.css" type="text/css" rel="stylesheet" />  
        <script language="javascript" type="text/javascript">  
            $(document).ready((function ()  
            {  
                $("#txtUser").autocomplete("GetCode.aspx");  
            }  
    ));  
        </script>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
            <div>  
                用户名:  
                <asp:TextBox ID="txtUser" runat="server"></asp:TextBox>  
            </div>  
        </form>  
    </body>  
    </html>  
复制代码

2.GetCode.aspx

前台为空

后台代码:

复制代码
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.Data;  
    using System.Data.SqlClient;  
      
    public partial class GetCode : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (Request.QueryString["q"] != null)  
            {  
                string key = Request.Params["q"].ToString();  
                string result = "";  
                SqlHelp sql = new SqlHelp();  
                string str = "select top 15 CustomCode from tCustomList where CustomCode like '" + key + "%'";  
                SqlDataReader dr = sql.ExecuteReader(str);  
                while (dr.Read())  
                {  
                    result += dr["CustomCode"].ToString() + "\n";  
                }  
                dr.Dispose();  
                sql.SqlClose();  
                if (result == "")  
                    result = "not exists";  
                Response.Write(result);  
            }   
        }  
    }  
复制代码

 

3. jquery.autocomplete.js

Download from jquery.autocomplete.js.rar

 

没有整理与归纳的知识,一文不值!高度概括与梳理的知识,才是自己真正的知识与技能。 永远不要让自己的自由、好奇、充满创造力的想法被现实的框架所束缚,让创造力自由成长吧! 多花时间,关心他(她)人,正如别人所关心你的。理想的腾飞与实现,没有别人的支持与帮助,是万万不能的。




    本文转自wenglabs博客园博客,原文链接:http://www.cnblogs.com/arxive/p/6251117.html ,如需转载请自行联系原作者


相关文章
|
2月前
|
JavaScript UED
jQuery Autocomplete
jQuery Autocomplete 是一个基于 jQuery 的插件,它为输入框或文本区域提供了自动完成功能。当用户在输入框中输入文本时,Autocomplete 可以根据用户输入的文本自动匹配并显示相关建议的选项。用户可以从中选择一个选项,而不需要手动输入完整的单词
22 2
|
JavaScript
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
114 0
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
240 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
501 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
JavaScript 安全 Windows
js或jquery实现页面打印可局部打印
js或jquery实现页面打印可局部打印
228 0
|
JavaScript
使用jquery中实现按回车触发按钮事件和点击提交按钮触发的是一个事件
使用jquery中实现按回车触发按钮事件和点击提交按钮触发的是一个事件
108 0
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
233 0
【jquery ajax】实现文件上传提交
|
JavaScript
利用jquery的attr方法一行代码实现的简单的图片切换效果
利用jquery的attr方法一行代码实现的简单的图片切换效果
137 0
利用jquery的attr方法一行代码实现的简单的图片切换效果
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
168 0
jquery实现单击div切换背景,再次单击回到原来样式
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
83 0
jQuery实现判断li的个数从而实现其他功能

热门文章

最新文章