jQuery-Autocomplete 介绍
autocompleter是 一个 简单的，容易的，可定制的 自动 完成 功能 插件 ， 支持 缓存。? 能够很好的实现输入框的 自动 完成(autocomplete)、建议 提示 (input
suggest) 功能 ， 支持 ajax数据加载。
自动 完善输入框
$("#input").autocomplete('option','appendTo',"#catheBuffe");
$("#input").autocomplete('option','delay',500);
放到对象里面
$("#input").autocomplete({
appendTo:'#catheBuffe',//挂载元素 如果没有指定就会去找父级‘ui-front’类 有加这个类上 没有就加到body上
autoFocus:true,//弹出框打开时 自动 获取 焦点 默 认false
delay:50,//按键发生时和执行 搜索 之 间的 延迟 0对本地数组更具响应性,对远程数据产生大量负荷 性能 较差
dis abled:false,//是否禁用 自动 完成 功能 默 认false
minLength:1,// 默 认1 用户 在执行 搜索 前所输入的数字 0对本地少量数据具有响应性
position:{ my: "left top",at: "left b ott om",collision: "none" },
// 自动 填充 菜单 对于输入框的位置 默 认已经写 也可以指定其它的元素定位
source: Array/String/Function
//Array:用于本地数据["choose1","choose2"] or [{label:'choose1',value:'value1'},{label:'choose2',value:'value2'}]
//label 为 显示 的数据 value为选中后填充到输入框的值 二者也可以指定 一个 值 相互公用
//String:指定 一个 返回jsON数据的URL资源 也可以 支持 跨域
//需要注意的是 autocomplete不会对结果过滤 但是可以把输入参数传给 后台 在 后台 过滤
//例:设置为"http://example.com" 当 用户 输入'foo'时,会发送get请求'http://example.com?term=foo'数据本身也可以返回和Array一样的结构
//Function 回调 最灵活,可以把任何数据源连接到 自动 完成, 包括 jsONP,包含两个参数
//1:request 请求对象,指向当前文本的输入值,request.term为输入值
//2:response 回调，它需要 一个 参数：向 用户 建议的数据。 这些数据应该根据所提供的术语进行过滤，
//并且可以采用上述任何一种简单的本地数据格式。 提供 自定义 的源回调来处理请求期 间的 错误 是非常重要的。
//即使遇到 错误 ，您也必须始终 调用 回复 回调。 这确保了小部件始终具有正确的状态
})
方法close();
$( ".selector" ).autocomplete( "close" );
关闭 打开的 自动 完成 菜单 ,结合 搜索 方法 有用
destroy();
$( ".selector" ).autocomplete( "destroy" );
完全 删除 自动 完成 功能 。 这会将元素返回到它的预初始状态。
dis able()
$( ".selector" ).autocomplete( " dis able" );
禁用 自动 完成
enable()
$( ".selector" ).autocomplete( "enable" );
开启禁用的 自动 完成
instance()
$( ".selector" ).autocomplete( "instance" );
检索 自动 完成的实例对象。 如果元素没有关联的实例，则返回undefined。
option(optionName)
var is dis abled = $( ".selector" ).autocomplete( "option"," dis abled" );
var options = $( ".selector" ).autocomplete( "option" );
获取 当前与指定的optionName关联的值。
option( optionName,value )
设置与指定的optionName关联的 自动 完成选项的值
$( ".selector" ).autocomplete( "option"," dis abled",true );
$( ".selector" ).autocomplete( "option",{ dis abled: true } );
search( [value ] )
$( ".selector" ).autocomplete( "search","" );
如果事件未被取消，则触发 搜索 事件并 调用 数据源。
可以通过类似于选择框的按钮在单击时打开建议。
当不带参数 调用 时，使用当前输入的值。
可以使用空字符串 调用 ，minLength：0 显示 所有项目。
事件//当选中值被 修改 时触发
change( event,ui )
$( ".selector" ).autocomplete({
change: function( event,ui ) {}
});
$( ".selector" ).on( "autocompletechange",function( event,ui ) {} );
//当 菜单 被隐藏时被触发 不是每 一个 事件都会触发
close( event,ui )
$( ".selector" ).autocomplete({
close: function( event,ui ) {}
});
$( ".selector" ).on( "autocompleteclose",ui ) {} );
// 自动 填充完成创建时触发。
create( event,ui )
$( ".selector" ).autocomplete({
create: function( event,ui ) {}
});
$( ".selector" ).on( "autocompletecreate",ui ) {} );
//将焦点移至某个项目（未选中）时触发。
focus( event,ui )
//建议 菜单 打开或更新时触发。
open( event,ui )
// 搜索 完成后触发，在 显示 菜单 之前。 用于本地处理建议数据，
//其中不需要 自定义 源选项回调。
// 搜索 完成后，始终会触发此事件，即使由于没有结果或禁用 自动 填充而导致 菜单 不会 显示 。
response( event,ui )
//在执行 搜索 之前触发，在满足minLength和delay之后。 如果取消，则不会启动请求，也不会建议任何项目。
search( event,ui )
//当从 菜单 中选择 一个 项目时触发。 默 认操作是将文本字段的值替换为所选项目的值。
select( event,ui )
$( ".selector" ).autocomplete({
select: function( event,ui ) {}
});
$( ".selector" ).on( "autocompleteselect",ui ) {} );
完整版的$('.autoCom- bro kers-decl').autocomplete({
delay: 10,
minLength: 1,
autoFocus: true,
source: function(request,response){
common.query bro kers('i',request.term,function(data){
data = data.rows || [];
//注意 如果要返回特定的 要自己过滤出合适的数据
$.each(data,function(){
var self = this;
self.label = self. bro kerExportCode + ',' + self. bro kerExportName;
self.value = self. bro kerExportName;
});
response(data);
});
},
select: function(event,ui){
var $this = $(this);
$this.parent().find('input:hidden').val(ui.item. bro kerExportCode);
},
change: function(event,ui){
if(!ui.item){
$(this).parent().find('input:hidden').val('');
}
},
messages: {
nor esults: '',
results: function() {}
}
})
.bind('blur',function(){
var $this = $(this),
value = $this.val(),
msg = "请填写正确值";
if(value != '' ){
common.query bro kers('i',value,function(data){
if(data.status != 1 || data.rows.length == 0){
$.addErrorMsg($this,msg);
}
});
}
});
网站地址 : https://www.devbridge.com/sourcery/components/jquery-autocomplete/
GitHub: https://github.com/devbridge/jQuery-Autocomplete
网站描述: 一个 简单的，容易的，可定制的 自动 完成 功能 插件
jQuery-Autocomplete官方网站
官方网站： https://www.devbridge.com/sourcery/components/jquery-autocomplete/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。
查看更多关于jQuery-Autocomplete的详细内容...