jQuery UI AutoComplete 使用说明

2019-08-06 08:59栏目:WRB前端

介绍 在 jQuery UI 的近年更新中追加了全自动落成控件 AutoComplete,那为大家提供了又叁个强大的开荒工具,这里介绍一下以此控件的选择方法。
首先,jQuery UI 是基于 jQuery 的,所以,必须在您的页面中首先引述 jQuery 脚本库,然后再援用 jQuery UI 库,对于 jQuery UI 库来讲,能够引用整个的库,也足以只是引用当前页面用到的库。
jQuery UI 的下载地址:
一.主导配置
诚如的话,引用独立的本子能够减弱页面包车型客车尺码,大家这里运用独立的台本。对于 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 的事无巨细表明参与这里:

复制代码 代码如下:

var url = "serviceHandler.ashx";
$("#auto").autocomplete(
{
source: url
}
);

大家得以经过一个形似管理程序来回到数据。供给极其注意的是,重临的串必须符合 JSON 格式供给,字符串必须利用双引号。

复制代码 代码如下:

public class serviceHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
HttpResponse response = context.Response;
System.IO.TextWriter writer = response.Output;
// 注意,必须是明媒正娶的 JSON 格式串,必须利用双引号
writer.Write("["One", "Two", "Three"]");
}
public bool IsReusable {
get {
return false;
}
}
}

常备在应用远程数据的时候,大家愿意在用户输入多少个字符之后,再拓展提醒,那足以由此minLength 属性来设置,如若是地面数据源,平日为 0, 对于远程数据源,也许多量数指标图景,应当适用增添这几个值。那样,大家的本子就改为了上面包车型地铁标准了。

复制代码 代码如下:

var url = "serviceHandler.ashx";
$("#auto").autocomplete(
{
source: url,
minLength: 2
}
);

四. 带有缓存的远程数据源 由此为 source 提供七个函数,大家可感到远程数据扩展三个本地的缓存。这样就不用每一趟都到服务器中展开查询。

复制代码 代码如下:

$(function () {
var url = "serviceHandler.ashx";
var cache = {}, lastXhr;
$("#auto").autocomplete({
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);
}
});
}
});
}
);

你也许感兴趣的篇章:

  • jQuery.Autocomplete落成机关完毕功效(详解)
  • Jquery AutoComplete自动完毕的选拔方法实例
  • jQuery UI Autocomplete 体验分享
  • jQuery UI AutoComplete 自动完毕使用小记
  • jQuery Autocomplete自动完结插件
  • JQuery autocomplete 使用手册
  • 依附jquery的文本框与autocomplete结合使用(asp.net json)
  • jQuery autocomplete插件修改
  • jQuery Autocomplete简介_引力节点Java高校整理

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:jQuery UI AutoComplete 使用说明