• input autocomplete 文本框自动检索


    首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css。

    由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下。
    前台代码如下:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %> 
    <!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 runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
    <script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script> 
    <link href="Styles/jquery.autocomplete.css" type="text/css" /> 
    <script language="javascript" type="text/javascript"> 
    //直接由数组获得 
    $(document).ready((function () { 
    var data = ["河北省", "河南省", "山东", "北京", "天津"]; 
    $("#txtProvince").autocomplete(data); 
    //由SERVER端获得 
    $("#txtUser").autocomplete("GetUserName.aspx"); 
    } 
    )); 
    </script> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
    <div> 
    省份:<input id="txtProvince" type="text" /> 
    </div> 
    <div> 
    用户名:<input id="txtUser" type="text" /></div> 
    </form> 
    </body> 
    </html> 
    

     其中用户名部分是从后台读取数据,相应的URL为GetUserName.aspx。该页面的.cs文件为:

    protected void Page_Load(object sender, EventArgs e) 
    { 
    //默认传入的键值为q 
    if (Request.QueryString["q"] != null) 
    { 
    string key = Request.Params["q"].ToString(); 
    string result = ""; 
    db db = new db(); 
    string sql = "select UserName from Users where UserName like '" + key + "%'"; 
    SqlDataReader dr = db.GetReader(sql); 
    while (dr.Read()) 
    { 
    result += dr["UserName"].ToString() + "
    "; 
    } 
    if (result == "") 
    result = "not exists"; 
    Response.Write(result); 
    } 
    } 
    
  • 相关阅读:
    PPT图片
    饥荒Steam相关mod代码
    Ubuntu20.04更换阿里源 source.list文件
    中断处理与进程调度的区别与联系
    原语和系统调用的区别
    立下个flag,这个月底之前要发一个深度学习入门系列的文章
    conda安装skimage
    机器学习入门(三)
    zip安装的MySQL绑定my.ini配置文件
    Anaconda配置安装
  • 原文地址:https://www.cnblogs.com/mySaveblogs/p/4521671.html
Copyright © 2020-2023  润新知