Jquery-AutoComplete自动提示简单实现

注：本人小白一个，目前还在校学习，这次老师让做的项目需要用到这个功能，所以花了一些时间搞了一下，本次案列实现功能为 用户注册信息，如果数据库对应表中存在部分信息，点击已有的用户的用户名，自动补全其它已有的基本信息

实现思路：通过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());

代码到这里就基本结束啦！希望大神们多多指教哈！