zoukankan      html  css  js  c++  java
  • 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); 
    } 
    } 
    
  • 相关阅读:
    微信第三方登录,ios第三方登录(没有进行二次封装,直接调用)
    How Do I Declare A Block in Objective-C?
    Android与JS混编(js调用java)
    React-Native做一个文本输入框组件
    如何在程序退出的时候清除activity栈
    React react-ui-tree的使用
    React-Native OpenGL体验二
    React-Native OpenGL体验一
    react-native使用react-art制作SVG动画
    Android画一个随意拖动的圆形
  • 原文地址:https://www.cnblogs.com/mySaveblogs/p/4521671.html
Copyright © 2011-2022 走看看