官网文档:Autocomplete
一、Autocomplete提供的重要属性
1. autofocus:当智能提示框出现时,是否自动选中第一项,默认为false,即不选中。
// Getter var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" ); // Setter $( ".selector" ).autocomplete( "option", "autoFocus", true );
2. delay:在按键后执行搜索的延时,默认为300ms。
// Getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
// Setter
$( ".selector" ).autocomplete( "option", "delay", 500 );
3. disabled:是否禁用自动完成功能,默认为false。
// Getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
// Setter
$( ".selector" ).autocomplete( "option", "disabled", true );
4. minlength:触发自动完成功能需要输入的最小字符数量。
// Getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
// Setter
$( ".selector" ).autocomplete( "option", "minLength", 0 );
5. source:即为指定智能提示下拉框中的数据来源,支持三种类型。
① array,主要用于本地化数据提供,支持两种格式:字符串数组 [ "choice1", "choice2" ]及标签和值属性的json格式数组 [ { label: "choice1",
value: "value1" }, ... ]
② string,用于ajax请求的远程地址链接,返回array或json格式字符串。
③ function,回调函数,最具有灵活性的一种方式,可用于返回任何数据源方式来实现自动完成,其中包含两个参数request,response通过
request.term来获取用户输入的值,通过response(argument)来对获取的数据源进行显示。
// Getter
var source = $( ".selector" ).autocomplete( "option", "source" );
// Setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );
6. appendTo :将值赋值给指定对象
// Getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
// Setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );
7. position(还没有过) :
// Getter
var position = $( ".selector" ).autocomplete( "option", "position" );
// Setter
$( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );
创建Autocomplete初始化:
$( ".selector" ).autocomplete({
appendTo: "#someElem",
autoFocus: true
,
delay: 300,
disabled: true,
minLength: 0,
source:data
});
二、jquery ui方法
1. close():关闭智能提示选择框。
$( ".selector" ).autocomplete( "close" );
2. destroy():销毁智能提示选择框,将其所产生的元素完
$( ".selector" ).autocomplete( "destroy" );
3. disable():禁用自动完成功能。
$( ".selector" ).autocomplete( "disable" );
4. enable():开启自动完成功能。
$( ".selector" ).autocomplete( "enable" );
5.instance() : 检索完成的实例对象。如果元素没有关联的实例,则返回未定义的。不像其他的部件的方法,instance()安全调用任何元素后,自动完成插件加载。
$( ".selector" ).autocomplete( "instance" );
6.option() : 获取包含键/值表示当前对象的哈希对(key/value)自动完成选项。
var options = $( ".selector" ).autocomplete( "option" )
7 .option( optionName ) :获取与指定optionname目前关联的值。
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
8.option( optionName, value ) :设置与指定的optionname相关的自动完成选项的值
$( ".selector" ).autocomplete( "option", "disabled", true );
9.option( options ) :设置一个或多个选项的自动完成。
10.search( [value ] ):触发一个搜索事件,如果事件没有被取消,则调用该数据源。可以通过selectbox像按钮用来打开建议点击时。当调用无参数时,使用当前输入的值。可以被称为一个空字符串,最大长度:0显示所有项目。
$( ".selector" ).autocomplete( "search", "" );
11.widget() :返回一个包含菜单元素的jQuery对象()
$( ".selector" ).autocomplete( "widget" );
三、出现提示框后可用的主要事件:
1. change(event, ui):当值改变时发生,ui.item为选中的项。
$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );
2. close(event, ui):当智能提示框关闭时发生。
$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );
3. create(event, ui):当智能提示框创建时发生,可以在此事件中,对外观进行一些控制。
$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );
4. focus(event, ui):当智能提示列表任意一项获得焦点时发生,ui.item为获得焦点的项。
$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );
5. open(event, ui):当智能提示框打开或更新时发生。
$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} );
6. response(event,ui):在搜索完成后智能提示框显示前发生,可以在此事件中对显示项进行处理
$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} );
7. search(event, ui):在开始请求之前发生,可以在此事件中返回false来取消请求。
$( ".selector" ).on( "autocompletesearch", function( event, ui ) {} );
8. select(event, ui): 当智能提示框中任意一项被选中时发生,ui.item为选中的项。
$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );
创建时可初始化事件:
$( ".selector" ).autocomplete({
change: function( event, ui ) {//方法 },
close: function( event, ui ) { //方法 },
create: function( event, ui ) {//方法 },
focus: function( event, ui ) {//方法 }
});