时间:2021-05-26
介绍
在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete,这为我们提供了又一个强大的开发工具,这里介绍一下这个控件的使用方式。
首先,jQuery UI 是基于 jQuery 的,所以,必须在你的页面中首先引用 jQuery 脚本库,然后再引用 jQuery UI 库,对于 jQuery UI 库来说,可以引用整个的库,也可以仅仅引用当前页面用到的库。
jQuery UI 的下载地址:http://jqueryui.com/download
一.基本配置
一般来说,引用独立的脚本可以减小页面的尺寸,我们这里使用独立的脚本。对于 autocomplete 来说,涉及到下面的几个脚本文件。
复制代码 代码如下:
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.position.js"></script>
<script src="jquery.ui.autocomplete.js"></script>
页面中当然要有一个输入框.
复制代码 代码如下:
<div class="demo">
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags" type="text">
</div>
</div>
二. 使用本地数据
对于使用来说,基本的使用非常简单,提示的数据可以来自数组。通过参数对象的 source 属性设置数据源。
复制代码 代码如下:
<script type="text/javascript">
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
// 这里使用数组作为数据源,availableTags 是数组的名称
$("#tags").autocomplete({
source: availableTags
});
});
</script>
现在,一个自动完成的效果已经可以工作了。
三.使用远程数据源
还可以为 source 属性设置一个表示远程地址的字符串,通过这个远程地址来获取 json 数据。
对于 autocomplete 来说,当提供一个地址的时候,在用户开始在输入框中输入时,将会向这个地址发出一个 GET 请求,请求中的参数名为 term 的参数表示当前输入的内容,
返回的结果必须是 json 格式的数据。
JSON 的详细说明参加这里:http://plete({
minLength: 2,
source: function (request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
lastXhr = $.getJSON(url, request, function (data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
});
}
});
}
);
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
LinkButton【链接按钮】使用说明使用到的头文件:easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyu
Tabs【标签】创建一个tab标签使用说明使用到的头文件:easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easy
其效果图如下:使用说明需要使用jQuery库文件和formValidation库文件[下载实例代码]http://jquery.com/同时需要自定义显示提示错
autocomplete官网:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/(
本文介绍的jQuery插件有点特殊,防自动提交表单的验证工具,就是我们经常用到的验证码工具,先给大家看看效果。效果图如下:使用说明需要使用jQuery库文件和R