Jquery-AutoComplete自动提示简单实现
程序员文章站
2022-09-04 15:29:54
注:本人小白一个,目前还在校学习,这次老师让做的项目需要用到这个功能,所以花了一些时间搞了一下,本次案列实现功能为 用户注册信息,如果数据库对应表中存在部分信息,点击已有的用户的用户名,自动补全其它已有的基本信息 实现思路:通过AutoComplete提示,异步通过用户名查询全表,充当AutoCom ......
注:本人小白一个,目前还在校学习,这次老师让做的项目需要用到这个功能,所以花了一些时间搞了一下,本次案列实现功能为 用户注册信息,如果数据库对应表中存在部分信息,点击已有的用户的用户名,自动补全其它已有的基本信息
实现思路:通过autocomplete提示,异步通过用户名查询全表,充当autocomplete数据源source , 当点击文本框输入用户名前一个字时,把从数据库中匹配到的用户名绑定到下拉框中,当点击下拉框中的用户名时,自动补全其它信息
1:首先引入需要的文件:两个js文件,两个css文件 如下:
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
前段html代码:
<form id="form1" runat="server"> <asp:textbox id="txtname" runat="server"></asp:textbox> 用户名 <br /> <asp:textbox id="txtphone" runat="server"></asp:textbox> 电话 <br /> <asp:textbox id="txtadd" runat="server"></asp:textbox> 家庭住址 </form>
javascript代码:
<script> $(function () { $("#txtname").autocomplete({ //用户名 minlength: 0, source: "handler.ashx", 异步查出的全表数据充当数据源 focus: function (event, ui) { focus为焦点事件 $("#txtname").val(ui.item.username + " " + ui.item.phone); //因为数据库中会有重名的 所有在这里我把用户名和电话一起绑出 return false }, select: function (event, ui) { select为: 下拉框点击事件 $("#txtname").val(ui.item.username); 给用户名文本框赋值 $("#txtphone").val(ui.item.phone); 电话文本框赋值 $("#txtadd").val(ui.item.add); 家庭地址赋值 return false; } }) .data("ui-autocomplete")._renderitem = function (ul, item) { 拼出的li标签为样式 return $("<li>") .append("<a>" + item.username + " " + item.phone + "</a>") .appendto(ul); }; }); </script>
异步c#代码:
string querystring = context.request["term"].tostring(); term为参数 autocomplete默认的参数,我是这么理解的,刚加载查询全表,当你点击用户名时候,team就是你点击的内容,接收到你点击的内容,去数据库中模糊查询 stringbuilder str = new stringbuilder(); dataset ds = kanghui.baseclass.dbhelpersql.query("select * from dbo.users where username like '%"+querystring+"%'", kanghui.common.confighelper.getconnectionstring("sqlconn"));
拼json串 if (ds.tables[0].rows.count > 0) { str.append("["); for (int i = 0; i < ds.tables[0].rows.count; i++) { str.append("{\"phone\":\"" + ds.tables[0].rows[i]["phone"] + "\",\"username\":\"" + ds.tables[0].rows[i]["username"] + "\",\"age\":\"" + ds.tables[0].rows[i]["age"] + "\"},"); } str.remove(str.length - 1, 1); str.append("]"); } context.response.write(str.tostring());
代码到这里就基本结束啦!希望大神们多多指教哈!