jQuery-Autocomplete

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对本地数组更具响应性,对远程数据产生大量负荷性能较差

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",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-brokers-decl').autocomplete({

delay: 10,

minLength: 1,

autoFocus: true,

source: function(request,response){

common.queryBrokers('i',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,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

网站描述:一个简单的，容易的，可定制的自动完成功能插件

官方网站：https://www.devbridge.com/sourcery/components/jquery-autocomplete/

小编说

以上是编程之家为你收集整理的jQuery-Autocomplete全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。

jQuery-Autocomplete