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！服了自己了。

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

jquery autocomplete的使用相关推荐

jquery autocomplete demo
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择. jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquer ...
JQuery Autocomplete实战
废话不多说,先看效果!~ 需要引入的资源如下 <link rel="stylesheet" href="/css/jquery.autocomplete.css&q ...
jquery.autocomplete自动补全功能
1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http:// ...
Jquery autocomplete插件
转自:https://www.cnblogs.com/Leo_wl/p/7845730.html Jquery autocomplete插件的使用示例回到目录 Jquery autocomplete ...
使用JQuery Autocomplete插件(一)
什么是Autocomplete效果,我们经常可以在google搜索时看到: 输入某几个关键字,google的搜索引擎会列出这个关键字对应的列表选项,然后只要其中选一个便可以了.这种功能很方便,在网 ...
jQuery Autocomplete
自动完成给我们带来了便捷的操作,这一点你完全可以在Google Sggestions得到充分的验证.下面荐一个jQuery下的自动提示插件jQuery Autcomplete plug-in,帮你完成 ...
jquery ajax自动完成,使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX)
使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX) 我正在尝试编写一个JQuery自动完成脚本,它将通过AJAX调用url并在用户将数据输入表单时更新自 ...
解决JQuery AutoComplete在IE9下出错的问题
JQuery AutoComplete插件在IE9下会因为bgiframe的问题出错解决方法: 引入新的bgiframe jquery.bgiframe-2.1.2.js: /*! Copyrigh ...
jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足! 问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下 ...
单击触发jquery.autocomplete的两种方法
jquery.autocomplete的参数 minChars设置为0时,默认要双击才会触发jquery.autocomplete,如果想要单击触发的话,得进行一定的处理才行.下面讲下我知道的单击触发 ...

jquery autocomplete的使用

jquery autocomplete的使用相关推荐

最新文章

热门文章