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="Stylesheet" href="/js/jquery.autocomplete.css" />

首先是一个最简单的Autocomplete（自动完成）代码片段：


代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AutoComplate</title>
<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="Stylesheet" href="/js/jquery.autocomplete.css" />
<script type="text/javascript">
$(function() {
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");

$('#keyword').autocomplete(data).result(function(event, data, formatted) {
alert(data);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="keyword" />
<input id="getValue" value="GetValue" type="button" />
</div>
</form>
</body>
</html>

result方法是jQuery Autocomplete插件里的重要方法，它在用户在选定了某个条目时触发。data参数为选中的数据。

一个稍微复杂的例子，可以自定义提示列表:


代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>自定义提示</title>
<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="Stylesheet" href="/js/jquery.autocomplete.css" />
<script type="text/javascript">
var emails = [
{ name: "Peter Pan", to: "peter@pan.de" },
{ name: "Molly", to: "molly@yahoo.com" },
{ name: "Forneria Marconi", to: "live@japan.jp" },
{ name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
{ name: "Don Corleone", to: "don@vegas.com" },
{ name: "Mc Chick", to: "info@donalds.org" },
{ name: "Donnie Darko", to: "dd@timeshift.info" },
{ name: "Quake The Net", to: "webmaster@quakenet.org" },
{ name: "Dr. Write", to: "write@writable.com" },
{ name: "GG Bond", to: "Bond@qq.com" },
{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }
];

$(function() {
$('#keyword').autocomplete(emails, {
max: 12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function(row, i, max) {
return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
},
formatMatch: function(row, i, max) {
return row.name + row.to;
},
formatResult: function(row) {
return row.to;
}
}).result(function(event, row, formatted) {
alert(row.to);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="keyword" />
<input id="getValue" value="GetValue" type="button" />
</div>
</form>
</body>
</html>

formatItem、formatMatch、formatResult是自定提示信息的关键。
formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体。
formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，
formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。

jquery bassistance.de AutoComplete自动完成效果代码下载

赞 (0)

相关推荐

  • jQuery autocomplete插件修改

    jQuery autocomplete插件修改

    主要修改了两个地方: 一.上下选择与输入值同步问题. 输入关键字后,当出现了下拉选项,用键盘的上下键选择时,关键字输入框的值,没有与你选择的值同步.插件是老外写的,可能他没有考虑到这一点. 二.修正了在firefox下中文输入,没有激活自动提交的问题. 老外当然不会用到中文输入,这个bug存在也理所当然了. 另:附件里的实现了选择后自动提交,也就和google.百度的效果完全一样了. 下载地址

  • jQuery UI AutoComplete 使用说明

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

  • JQuery autocomplete 使用手册

    官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete 当前版本:1.1 需要JQuery版本:1.2.6+ 首先是最重要的方法 autocomplete( url or data, [options] ) 第一个参数可以是数组或者url.options参数比较复杂: * minChars (Number): 在触发autoComplete前用户至少需要输入的字符数.Default: 1,如果设为0,在输入框内双击

  • 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的文本框与autocomplete结合使用(asp.net+json)

    JS脚本引用 复制代码 代码如下: <script src="/scripts/Jquery.autocomplete/jquery.autocomplete.js" type="text/javascript"></script> 样式引用 复制代码 代码如下: <style type="text/css" media="all"> @import url("/scripts/J

  • 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自动完成插件

    相对于同类插件,他的特色有3点. 1.可缓存查询结果 (二次查询速度快) 2.非keyup监听方式 (解决某些系统/情况下无法触发keyxxx事件的问题) 3.简洁的参数 (好看?) 插件性能尚好,我的E6500.2G内存,30秒内一共发生了4469次调用,耗时94.65毫秒:百度的是2432次调用,80.24毫秒. 接近1倍的调用是jQuery中的问题,但具体原因我还没弄明白,如果那位兄弟知道的还请不吝赐教. 调用方法 复制代码 代码如下: jQuery("#kw").suggest

  • jQuery Autocomplete简介_动力节点Java学院整理

    jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大.最灵活的Autocomplete,它支持本地的Array/JSON数组.通过ajax请求的Array/JSON数组.JSONP.以及Function(最灵活)等方式来获取数据. 支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ["bjpowernode","动力节点"

  • jQuery UI Autocomplete 体验分享

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

  • 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 select自动选中功能实现方法分析

    本文实例分析了jQuery select自动选中功能实现方法.分享给大家供大家参考,具体如下: //筛选 var typeid = "<!--{$typeid}-->"; var bigclassid = "<!--{$bigclassid}-->"; var smallclassid = "<!--{$smallclassid}-->"; $("#typeid option[value="

  • jquery autocomplete自动完成插件的的使用方法

    首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css. 由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下. 前台代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComple

  • jQuery Raty星级评分插件使用方法实例分析

    本文实例讲述了jQuery Raty星级评分插件使用方法.分享给大家供大家参考,具体如下: 使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示: 使用方法很简单,首先从https://github.com/wbotelhos/raty下载raty的源代码(依赖于jquery) 然后在页面中引入相应的js文件.css文件.图片资源,在需要添加评分组件的元素上(比如span标签)添加下面的jquery代码即可: $('span').raty(); 以上为jQuery Raty

  • Linux系统设置开机自动运行脚本的方法实例

    前言 大家好,我是良许. 在工作中,我们经常有个需求,那就是在系统启动之后,自动启动某个脚本或服务.在 Windows 下,我们有很多方法可以设置开机启动,但在 Linux 系统下我们需要如何操作呢? Linux 下同样可以设置开机启动,但可能需要我们敲一些命令(可能也有 UI 界面的设置方法,但我不熟,我更多是玩命令).下面我们就介绍三种简单但可行的开机启动设置方法. 方法一:修改 /etc/rc.d/rc.local 文件 /etc/rc.d/rc.local 文件会在 Linux 系统各项

  • django数据库自动重连的方法实例

    简介 Django数据库连接超过wait_timeout导致连接丢失时自动重新连接数据库 https://github.com/zhanghaofe...(本地下载) 安装 pip install django_db_reconnect 注意仅支持pymysql,使django使用pymysql需要先安装包并在settings.py所在目录的__init__.py增加如下代码: import pymysql pymysql.install_as_MySQLdb() 使用 添加django_db_

  • jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解

    本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法.分享给大家供大家参考,具体如下: 一.一次加载.多次使用: 前端JS代码: /*客户名称自动匹配*/ function customerAutoComplete(){ $.ajax({ type:"GET", url:encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), dataType:"j

随机推荐