jqueryautocomplete自动完成插件的的使用方法
2023-06-13 09:14:24 时间
首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css。
由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下。
前台代码如下:
复制代码代码如下:
由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下。
前台代码如下:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="AutoComplete.aspx.cs"Inherits="AutoComplete"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="Scripts/jquery-1.4.1-vsdoc.js"type="text/javascript"></script>
<scriptsrc="Scripts/jquery.autocomplete.js"type="text/javascript"></script>
<linkhref="Styles/jquery.autocomplete.css"type="text/css"/>
<scriptlanguage="javascript"type="text/javascript">
//直接由数组获得
$(document).ready((function(){
vardata=["河北省","河南省","山东","北京","天津"];
$("#txtProvince").autocomplete(data);
//由SERVER端获得
$("#txtUser").autocomplete("GetUserName.aspx");
}
));
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
省份:<inputid="txtProvince"type="text"/>
</div>
<div>
用户名:<inputid="txtUser"type="text"/></div>
</form>
</body>
</html>
其中用户名部分是从后台读取数据,相应的URL为GetUserName.aspx。该页面的.cs文件为:
protectedvoidPage_Load(objectsender,EventArgse)
{
//默认传入的键值为q
if(Request.QueryString["q"]!=null)
{
stringkey=Request.Params["q"].ToString();
stringresult="";
dbdb=newdb();
stringsql="selectUserNamefromUserswhereUserNamelike""+key+"%"";
SqlDataReaderdr=db.GetReader(sql);
while(dr.Read())
{
result+=dr["UserName"].ToString()+"\n";
}
if(result=="")
result="notexists";
Response.Write(result);
}
}
写完之后发现可以实现想要的功能,可是样式老是有问题。显示出来的结果列表挺丑的,好像没有套用上CSS。想了半天也没看出哪的问题来。今天早上猛然发现犯了一个低级错误啊,少写了rel="stylesheet",MYGOD!服了自己了。
一个简单的例子到此完成了。继续学习。
相关文章
- java清除session_退出页面自动清除java session方法
- latex中bibtex生成参考文献_英文参考文献自动生成方法
- 一方法解决微信视频号视频怎么下载,视频号视频怎么保存
- Intellij idea liveTemplate 方法注释之params,return参数自动获取
- Linux自动内存管理OOM的关闭方法(linux关闭oom)
- MySQL实现行列转换的简单方法(mysql行列转换)
- 数据库Oracle删除EM数据库的快捷方法(oracle删除em)
- 龄SQL Server计算人员年龄的实现方法(sqlserver得到年)
- MySQL无法自动启动的解决方法(mysql不能自启动)
- MySQL无法储存汉字解决方法分享(mysql 不能存汉字)
- 下载完成后页面不自动关闭的方法
- MSSQL自动同步设置方法
- DB2自动递增字段实现方法
- Window系统下自动备份MySql数据库方法
- 让Apache支持cgi、SSI、shtml的配置方法
- JS获取节点的兄弟,父级,子级元素的方法
- thinkphp的c方法使用示例
- PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
- 多种方法实现360浏览器下禁止自动填写用户名密码
- ThinkPHP提交表单时默认自动转义的解决方法
- python文件读写操作与linuxshell变量命令交互执行的方法