jquery UI Autocomplete 自动提示

官网文档：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 ) {//方法 }
});