`
nianshi
  • 浏览: 416254 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

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

阅读更多

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

发表:admin    阅读:1377 次  关键字:   字体:[ ]

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自动完成效果代码 下载
分享到:
评论

相关推荐

    Jquery AutoComplete的使用方法实例

    **jQuery AutoComplete 使用详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全功能,常用于搜索框、表单输入等场景,极大地提升了用户体验。本篇将详细介绍如何使用 jQuery ...

    jquery autocomplete 自动完成 插件

    3. **初始化插件**:使用jQuery选择器找到该元素,并调用`autocomplete()`方法进行初始化,设置必要的选项。 ```javascript $(function() { $("#autocomplete-input").autocomplete({ source: function(request,...

    jQuery AutoComplete使用实例

    **jQuery AutoComplete 使用详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全功能,能够极大地提升用户体验。这个插件基于 jQuery 库,因此需要先引入 jQuery 才能使用。在本文...

    jquery.autocomplete.js使用示例,可直接运行

    **jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    jquery Autocomplete插件,搜索自动完成

    jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html

    Google Suggest,jquery autocomplete,自动完成示例

    总的来说,这个资源包提供了一个关于如何利用jQuery实现Google Suggest样式的自动完成功能的教程或实例。开发者可以通过学习和实践,提升自己在前端交互设计方面的能力,为网站或应用增加高效、友好的用户体验。同时...

    jquery.autocomplete自动完成实例

    $("#"+txtBelongProvince).autocomplete(data,{ minChars: 0, max:data.length, matchCase:false,//不区分大小写 multiple: true, //允许多选 multipleSeparator:';',//多选分隔符 formatItem: function(row, ...

    jquery autoComplete

    在提供的“autocomplete 范例”中,可能包含了一个演示如何使用 `jQuery autoComplete` 的实例。这个例子可能包括 HTML 结构、CSS 样式和 JavaScript 代码,展示了如何实现根据输入的表名和字段名实时获取提示信息的...

    jQuery Autocomplete plugin(自动完成插件) 1.1.zip

    jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...

    jquery文本框自动补全完整实例 ajax autocomplete

    通过以上步骤,你就可以创建一个基本的jQuery autocomplete实例。`autocomplete2`可能包含更复杂或定制化的实现,例如包含多个数据源、自定义模板等。进一步探索这个文件,你可以学习到更多关于jQuery与Ajax结合实现...

    jQuery-Autocomplete-master.rar

    综上,"jQuery-Autocomplete-master"压缩包提供的实例,不仅展示了如何使用jQuery Autocomplete插件实现自动补全功能,还涵盖了本地和远程数据源的处理,对于前端开发者来说,这是一个很好的学习和实践资源。

    JQ多个autocomplete 自动完成 实例

    总之,"JQ多个autocomplete 自动完成 实例"资源将帮助你掌握`jQuery UI Autocomplete`的基本用法和高级特性。通过学习这些实例,你将能够更有效地将自动完成功能整合到你的项目中,提升用户体验,同时减少用户的输入...

    jQuery-Autocomplete资源

    **jQuery Autocomplete** 是一个非常流行的JavaScript库,用于在用户输入时提供动态建议或自动完成。这个资源包包含了丰富的信息和实例,可以帮助开发者更深入地理解和应用jQuery Autocomplete插件。 **1. 插件介绍...

    jquery.autocomplete.js 自动补全插件实例

    在“jquery.autocomplete.js 自动补全插件实例”中,开发者可以利用此插件创建一个智能搜索或填写表单的功能。配合`jquery.autocomplete.css`,这个插件不仅提供了核心的自动补全逻辑,还确保了与页面其他元素的样式...

    PHP实例开发源码—jQuery AutoComplete输入提示的应用实例.zip

    首先,jQuery AutoComplete是jQuery UI库中的一个组件,它能够为输入字段提供自动补全的功能。当用户在输入框中键入字符时,插件会根据预定义的数据集动态显示匹配的建议列表。这个插件基于jQuery的核心库,所以使用...

    jquery.autocomplete的使用示例及说明文档

    jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动完成的功能,可以极大地提升用户在输入时的效率和体验。这个插件适用于各种场景,如搜索框、表单填充等,能够根据用户输入的文本实时给出...

    jquery-autocomplete

    提供的帮助文档将详细介绍如何配置和使用jQuery Autocomplete插件,包括所有可用的选项、方法和事件。通过Demo,你可以直观地看到插件在实际场景中的应用,有助于理解和学习。Demo中通常包含了各种常见用法和复杂...

Global site tag (gtag.js) - Google Analytics