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！服了自己了。
一个简单的例子到此完成了。继续学习。

赞 (0)

相关推荐

  • Jquery AutoComplete自动完成 的使用方法实例

    jquery-autocomplete配置: <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script> <link rel="

  • jQuery UI AutoComplete 使用说明

    介绍 在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete,这为我们提供了又一个强大的开发工具,这里介绍一下这个控件的使用方式. 首先,jQuery UI 是基于 jQuery 的,所以,必须在你的页面中首先引用 jQuery 脚本库,然后再引用 jQuery UI 库,对于 jQuery UI 库来说,可以引用整个的库,也可以仅仅引用当前页面用到的库. jQuery UI 的下载地址:http://jqueryui.com/download 一.基本配置 一般来说,

  • jquery.AutoComplete.js中文修正版(支持firefox)

    复制代码 代码如下: jQuery.autocomplete = function(input, options) { // Create a link to self var me = this; // Create jQuery object for input element var $input = $(input).attr("autocomplete", "off"); // Apply inputClass if necessary if (optio

  • jQuery.Autocomplete实现自动完成功能（详解）

    1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://docs.jquery.com/Plugins/Autocomplete 2.jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) m

  • jQuery UI Autocomplete 体验分享

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: 复制代码 代码如下: ["cnblogs","博客园","囧月"] 对于JSON格式的Array,则要求有:label.value属性,如下: 复制代码 代码如下: [{label: "博客园", value: "cnblogs"}, {label: &qu

  • 修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交

    但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配:而在我的IE6.0下,则无此问题. 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过"keydown"事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发"keydown"的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的:但在firef

  • asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    首先来看一些效果图: 这个是淘宝首页的搜索效果 京东首页的搜索效果 我修改的jQuery.AutoComplete实现的效果 一.实现效果分析 我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了): .首先根据关键字列出关键字相关的信息(包含统计信息) .可以使用键盘上下键选择(默认不选中第一条),文本框内容根据选择信息变换 .当选择第一或者最后一条时再向上或向下则取消选中,文本框中内容还原回原先输入的内容(这点比较重要,京东

  • jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果.1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目. 后台代码如下: 复制代码 代码如下: using System.Coll

  • jQuery UI AutoComplete 自动完成使用小记

    jQuery UI AutoComplete 自动完成使用小记

    页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="web_Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • jQuery插件autocomplete使用详解

    jQuery插件autocomplete使用详解

    项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果. 1.

随机推荐