jquery autocomplete的使用

使用jQuery Autocomplete插件

最新推荐文章于 2024-10-16 13:54:33 发布

weixin_30608503

最新推荐文章于 2024-10-16 13:54:33 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript c# ViewUI

原文链接：http://www.cnblogs.com/janes/archive/2010/08/06/1793754.html

本文介绍了如何使用jQuery Autocomplete插件实现输入框自动完成功能。通过数组和服务器请求两种方式演示了数据加载过程，并解决了样式应用问题。

最近刚开始学jquery，想实现类似GOOGLE搜索时自动显示出相关结果的效果。于是选择了使用jquery 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() + " \n " ;
            }
             if (result == "" )
                result = " not exists " ;
            Response.Write(result);
        }
    }

写完之后发现可以实现想要的功能，可是样式老是有问题。显示出来的结果列表挺丑的，好像没有套用上CSS。想了半天也没看出哪的问题来。今天早上猛然发现犯了一个低级错误啊，少写了rel="stylesheet"，MY GOD！服了自己了。

一个简单的例子到此完成了。继续学习。

转载于:https://www.cnblogs.com/janes/archive/2010/08/06/1793754.html