Autocomplete

1、功能

根據用戶輸入值進行搜索和過濾，讓用戶快速找到並從預設值列表中選擇。

官網地址：http://jqueryui.com/autocomplete/

 

2、使用

1、引入文件

<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>

2、html代碼：

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

三、js代碼：

$( function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
} );

四、自定義下拉菜單高度：修改jquery.ui.css，添加紅色標註部分代碼

.ui-autocomplete {
   position: absolute;
   top: 0;
   left: 0;
   cursor: default;
   overflow-y: auto;    
   overflow-x: hidden;
   max-height: 230px;
}

 

3、API

1、鍵盤輸入

當下拉菜單展開時，能夠使用下列鍵盤命令：

UP：將焦點移至上一個選項

DOWN：將焦點移至下一個選項

ESCAPE：關閉下拉菜單

ENTER：選擇下拉菜單中當前處於焦點的選項並關閉下拉菜單

TAB：選擇下拉菜單中當前處於焦點的選項，關閉下拉菜單並將焦點移至下一個可聚焦的元素

PAGE UP/PAGE DOWN：將焦點置頂/置底

當下拉菜單關閉時，能夠使用下列鍵盤命令：

UP/DOWN：展開下拉菜單，若是minLength屬性已定義

 

2、屬性

2.1 appendTo：下拉菜單被添加至哪一個元素，默認值爲input標籤的class爲"ui-front"祖先元素

初始化代碼：

$( ".selector" ).autocomplete({
     appendTo: "#someElem"
});

2.2  autoFocus：設置爲true值時，當下拉菜單展開時第一個選項將自動獲取焦點

$( ".selector" ).autocomplete({
    autoFocus: true
});

2.3 delay：延遲時間，單位爲毫秒

$( ".selector" ).autocomplete({
     delay: 500
});

2.4 disabled：禁用插件，默認值爲false

$( ".selector" ).autocomplete({
    disabled: true
});

2.5 minLength：展現下拉菜單須要的最小輸入字符數

$( ".selector" ).autocomplete({
     minLength: 0
});

2.6 source：

類型：Array，String，Function

默認值：無，必須指定

Array：數組能夠被使用爲本地數據

字符串數組：["Choice1","Choice2"]，

有label和value屬性的對象數組：[{label:"Choice1",value:"value1"},...]

String：指向一個能夠轉換爲JSON數據的URL

$( ".selector" ).autocomplete({
     source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});

 

3、方法Methods

3.1 close()：關閉下拉菜單

$( ".selector" ).autocomplete( "close" );

3.2 destroy()：完全移除自動完成插件功能

$( ".selector" ).autocomplete( "destroy" );

3.3 disable()：禁用插件

$( ".selector" ).autocomplete( "disable" );

3.4 enable()：啓用插件

$( ".selector" ).autocomplete( "enable" );

3.5 option(optionName)：獲取特定屬性值

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );

3.6 option()：獲取全部屬性值，返回一個包含屬性鍵值對的對象

var options = $( ".selector" ).autocomplete( "option" );

3.7 option(optionName,value)：給特定屬性賦值

$( ".selector" ).autocomplete( "option", "disabled", true );

3.8 option( options )：給一個或多個屬性賦值

$( ".selector" ).autocomplete( "option", { disabled: true } );

 

4、擴展點Extension Points

4.1 _renderItem(ul,item)：控制下拉菜單每一個選項的生成

_renderItem: function( ul, item ) {
  return $( "<li>" )
    .attr( "data-value", item.value )
    .append( item.label )
    .appendTo( ul );
}

4.2 _renderMenu(ul,items)：控制生成下拉菜單的方法

_renderMenu: function( ul, items ) {
  var that = this;
  $.each( items, function( index, item ) {
        that._renderItemData( ul, item );
  });
  $( ul ).find( "li:odd" ).addClass( "odd" );
}

4.3 _resizeMenu()：下拉菜單展開以前控制其大小

_resizeMenu: function() {
      this.menu.element.outerWidth( 500 );
}

 

5、事件Events

5.1 change(event,ui)

當區域失去焦點，且輸入值發生改變時觸發事件

初始化：

$( ".selector" ).autocomplete({
    change: function( event, ui ) {}
});

綁定事件監聽：

$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );

5.2 close(event,ui)

當下拉菜單隱藏時觸發

5.3 create(event,ui)

建立插件時觸發

5.4 focus(event,ui)

當焦點移動至選項時觸發。默認操做是將處於焦點選項的值代替輸入區域的值

5.5 open(event,ui)

當下拉菜單展開時觸發

5.6 select(event,ui)

當選中下拉菜單的某個選項時觸發