JSON: JavaScript对象表示法(JavaScript Object Notation)
JSON 是存储和交换文本信息的语法。类似于XML
JSON比XML更小，更快，更易解析
------------------------------------------------------------------------------
例子1
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Hello Autocomplete</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.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: 8,
minChars: 0,
width: 400,
scrollHeight: 300,
matchContains: true,
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>
------------------------------------------------------------------------------
例子2
$(function(){
var url = "../jsonTreeData/issueCustodianDataAction!getIssueCustodian.action";
$("#issueCustodian").autocomplete(url,{
max : 30,
minChars : 0,
cacheLength : 0,
width:120,
mustMatch : true,
dataType:"json",
extraParams : {
"issueCustodian.code" : function(){
var issueCustCode = $("#issueCustodian").val();
if(issueCustCode.indexOf("-") != -1){
issueCustCode = fundCodeValue.split("-")[0];
}
return encodeURI(issueCustCode);
},
"jsonSerializeParams" : "code;name"
},
parse: function(data){
var rows = [];
if(data == null){
return rows;
}
var d = eval("("+data+")");
for(var i=0; i<d.length; i++){
rows[rows.length] = {
data:d[i], //每条数据对象
value:$.trim(d[i].code)+"-"+$.trim(d[i].name), //与输入的值比较的数据
result:$.trim(d[i].code)+"-"+$.trim(d[i].name) //选中的实际数据
};
}
return rows;
},
formatItem: function(row, i, max) {
return $.trim(row.code)+"-"+$.trim(row.name);
}
});
});
minChars(number):
该参数指定在触发autocomplete之前用户在查询框中输入的最小字符数，通常设置为1，
即文本框值不为空的时候执行autocomplete,如果取值为0，则在用户双击查询文本框或删除文本框内容时查询
width:
该参数的用途是指定下拉框的宽度，通常不用设置，默认的值为和<input>元素相同
max:
查询时下拉列表框中显示的条目数，defaultValue为10
delay
击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
autoFile(boolean)
是否在用户选择时自动将用户鼠标所在的值填充到input元素中，default:false
mustMatch(boolean)
参数boolean类型，true时，如果输入的查询条件无法匹配到合适的结果，
则<input>元素中输入的查询值会自动清空，否则会保留。Default:false
selectFirst(boolean)
参数为true时，则用户按下tab键或者return键时会自动将查询结果的第一条记录选中到input元素中
cacheLength(number)
缓存记录的条数，即从数据库中取得记录要缓存多少条，1为不缓存，defalut:10
matchSubset(boolean)
是否对从服务器的查询结果使用缓存，比如：上一次的搜索关键字为java，
则下次再次输入java进行查询时不用再次连接服务器查询，
而是从缓存中取得上次查询的结果，这样做可以减少访问服务器的次数，提供性能。Default:true
matchCase(boolean)
是否开启大小写敏感开关，在使用缓存时比较重要
multiple(boolean)
是否允许多值查询，如果为true,则查询到第一条结果后，再次输入查询条件则会后续的查询结果显示出来。
multipleSeparator(string)
只有在multiple属性设置为true时此属性才能生效,该属性用来控制在多条件查询时使用的分隔符，default:”,”
scroll(boolean)
设置当结果集大于默认高度时是否使用滚动条显示,default:true
scrollHeight(number)
查询结果框的显示高度，当超过该高度时会使用scroll
formatItem(Function)
对服务器返回的每一行数据都调用该函数来处理，返回值将用LI元素包含显示在下拉列表中，
autocomplete会提供三个参数(row,I,max)
其中row表示服务器端返回回来的结果数组，
i为当前的行数(正在处理第几行数据)，
max为返回的记录总数(查询到的结果总数)，default:none，不指定则直接返回服务器的结果值
formatResult(Function)
功能和formatItem基本类似，同样有三个参数作用相同，
暂时没发现写该与不写该函数有什么区别
formatMatch(Function)
对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
extraParams (Object): 为服务器端后台提供更多的参数，
参数的形式如下：{name:lixiao},在向后台传递参数时会自动在url后追加该参数?name=lixiao
matchContains (Boolean)
决定比较时是否要在字符串内部查看匹配，如ba是否与foo bar中的ba匹配.使用缓存时比较重要.
autoFill (Boolean)
要不要在用户选择时自动将用户当前鼠标所在的值填入到input框，Default: false
formatResult (Function)
和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.
Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
.result(function(event, row, formatted) {alert(row.to);
result (handler) Returns:jQuery
此事件会在用户选中某一项后触发，参数为：
event: 事件对象. event.type为result.
data: 选中的数据行.
formatted:formatResult函数返回的值
相关推荐
标题中的“jquery自动完成输入框”指的是使用jQuery库实现的Autocomplete功能，这是一种常见的前端UI交互设计，用于提升用户在输入框中输入信息时的效率和体验。它会在用户输入时提供匹配的建议列表，常见于搜索框、...
jQuery自动完成插件是网页开发中常用的一种工具，它能够为用户提供实时的搜索建议，提升输入体验。在标题"jQuery自动完成插件autocomplete.zip"中，我们了解到这是一个基于jQuery库的插件，主要功能是实现自动完成...
**jQuery自动完成插件概述** jQuery自动完成插件是一种便捷的前端开发工具，它极大地提升了用户体验，特别是当用户需要在输入框中输入特定数据时。这款轻量级的jQuery插件设计精巧，旨在帮助用户快速找到并选择匹配...
jQuery completer 是 jQuery 自动完成插件。在线演示 标签：jQuery
【jQuery自动完成功能包详解】 在Web开发中，用户界面的交互性和便捷性是提升用户体验的关键因素之一。"仿百度搜索的jQuery自动完成功能包"正是为了解决这个问题而设计的，它允许开发者轻松地在网页文本框中实现...
**jQuery自动完成插件**是一种常用的前端开发工具，它能够为网页中的输入框提供自动补全功能，类似于搜索引擎的搜索建议。这种插件极大地提升了用户体验，减少了用户输入内容的时间，提高了交互效率。在网页设计中，...
**jQuery自动完成插件概述** 在网页开发中，jQuery自动完成插件是一种常见的交互功能，它为用户输入提供即时建议，提升用户体验。这些插件通常用于搜索框、表单输入等场景，帮助用户快速找到他们想要的信息或输入...
**jQuery 自动完成控件详解*...总的来说，jQuery自动完成控件通过其强大的功能和简洁的API，为Web开发者提供了高效构建搜索框和表单字段自动完成功能的途径。合理利用这个工具，可以显著提升网页的交互性和用户满意度。
**jQuery 自动完成** jQuery 自动完成是一种交互式功能，用于在用户输入时提供下拉建议，常见于搜索框、...无论你是新手还是经验丰富的开发者，理解并掌握jQuery自动完成的原理和实践，都将对你的项目带来显著的提升。
《jQuery自动完成输入插件——实现高效用户交互体验》 在网页开发中，提供便捷的用户输入体验至关重要，其中一种常见的方法就是使用自动完成输入功能。jQuery作为一个轻量级、功能丰富的JavaScript库，为开发者提供...
2. `autocomplete.js`：这是JavaScript文件，很可能包含了jQuery自动完成功能的主要逻辑，包括监听用户输入、发送AJAX请求、处理响应并更新界面等操作。开发者可以通过查看和修改这个文件来调整自动完成的行为。 3. ...
在这个场景中，我们将聚焦于一个特定的插件——jQuery自动完成插件，它能极大地提升开发者的编码效率。 jQuery是一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在Sublime Text...
这个“jquery自动完成下拉框源码示例”就是针对这一功能的实现。 jQuery 自动完成下拉框通常指的是一个输入框在用户输入时，会动态显示与输入内容匹配的建议列表。这种功能在搜索框、地址输入、产品选择等场景非常...
**jQuery 自动完成 Autocomplete 知识点详解** jQuery 的 Autocomplete 是一个强大的插件，它为用户在输入框中输入内容时提供实时的建议或匹配项，极大地提高了用户体验。这个功能广泛应用于搜索框、表单填充等场景...
**jQuery库与Ajax技术** ...综上所述，这款支持Ajax的jQuery自动完成插件提供了高效、灵活的自动补全功能，结合jQuery库的强大功能和JSON数据的便捷性，能够轻松地集成到各种Web应用中，提升用户交互体验。
jQuery plugin for autocomplete - jQuery自动完成插件
**jQuery自动完成(Autocomplete)** jQuery的自动完成插件是一种强大的交互功能，它允许用户在输入文本时根据已有的数据集快速选择合适的选项。这个功能常见于搜索框、表单填充等场景，极大地提高了用户体验。在本篇...
**jQuery自动完成插件autocompleter** jQuery的自动完成插件，如"autocompleter"，是一种增强用户输入体验的工具。它允许用户在输入框中输入文本时，根据预设的数据集提供实时的建议选项。这种功能在搜索框、地址栏...
autocomplete, jQuery自动完成插件，如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete