autoComplete
自动完善输入框
$("#input").autocomplete('option','appendTo',"#catheBuffe");
$("#input").autocomplete('option','delay',500);
放到对象里面
$("#input").autocomplete({
appendTo:'#catheBuffe', //挂载元素 如果没有指定就会去找父级‘ui-front’类 有加这个类上 没有就加到body上
autoFocus:true, //弹出框打开时 自动获取焦点 默认false
delay:50, //按键发生时和执行搜索之间的延迟 0对本地数组更具响应性,对远程数据产生大量负荷 性能较差
disabled:false, //是否禁用自动完成功能 默认false
minLength:1, //默认1 用户在执行搜索前所输入的数字 0对本地少量数据具有响应性
position:{ my: "left top", at: "left bottom", 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" );
完全删除自动完成功能。 这会将元素返回到它的预初始状态。
disable()
$( ".selector" ).autocomplete( "disable" );
禁用自动完成
enable()
$( ".selector" ).autocomplete( "enable" );
开启禁用的自动完成
instance()
$( ".selector" ).autocomplete( "instance" );
检索自动完成的实例对象。 如果元素没有关联的实例，则返回undefined。
option(optionName)
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
var options = $( ".selector" ).autocomplete( "option" );
获取当前与指定的optionName关联的值。
option( optionName, value )
设置与指定的optionName关联的自动完成选项的值
$( ".selector" ).autocomplete( "option", "disabled", true );
$( ".selector" ).autocomplete( "option", { disabled: 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", function( event, ui ) {} );
//自动填充完成创建时触发。
create( event, ui )
$( ".selector" ).autocomplete({
create: function( event, ui ) {}
});
$( ".selector" ).on( "autocompletecreate", function( event, 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", function( event, ui ) {} );
完整版的
$('.autoCom-brokers-decl').autocomplete({
delay: 10,
minLength: 1,
autoFocus: true,
source: function(request, response){
common.queryBrokers('i', request.term, request.term, function(data){
data = data.rows || [];
//注意 如果要返回特定的 要自己过滤出合适的数据
$.each(data, function(){
var self = this;
self.label = self.brokerExportCode + ',' + self.brokerExportName;
self.value = self.brokerExportName;
});
response(data);
});
},
select: function(event, ui){
var $this = $(this);
$this.parent().find('input:hidden').val(ui.item.brokerExportCode);
},
change: function(event, ui){
if(!ui.item){
$(this).parent().find('input:hidden').val('');
}
},
messages: {
noResults: '',
results: function() {}
}
})
.bind('blur', function(){
var $this = $(this),
value = $this.val(),
msg = "请填写正确值";
if(value != '' ){
common.queryBrokers('i', value, value, function(data){
if(data.status != 1 || data.rows.length == 0){
$.addErrorMsg($this, msg);
}
});
}
});
网友评论