一、功能

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

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

?

二、使用

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>

3、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}); } );

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

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

?

三、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)

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

?

轉載于:https://www.cnblogs.com/sakura0203/p/6485459.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的Autocomplete的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。