轉：JqueryUI學習筆記-自動完成autocomplete
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<style type="text/css">
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
//擴展autocomplete組件，重寫autocomplete的_renderMenu方法，將提示條目分類別顯示
//$.widget接受三個參數，第一個參數是新的組件的名稱，必須以custom.開頭，.後面的才是新組件的名稱，調用或者初始化方式與autocomplete相同
//第二個參數是擴展或者重寫的組件，這裏是$.ui.autocomplete，自動完成組件
//第三個參數是對象，包含了重寫的屬性或者方法，這裏重寫了_renderMenu方法
$.widget("custom.catcomplete", $.ui.autocomplete, {
//該方法在渲染下拉列表之前被調用，可以通過修改此方法達到將選項分類的目的
//傳入的ul參數是選項的父容器，可以將選項增加到容器中
//傳入的items參數是即將顯示的數據列表
_renderMenu : function(ul, items) {
var that = this;
currentCategory = "";
//遍歷items對象數組，將他們分類，下面的這種方法必須保證同類別的數據放在一起才可以。
$.each(items, function(index, item) {
if (item.category != currentCategory) {
ul.append("<li class=‘ui-autocomplete-category‘>" + item.category + "</li>");
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
}
});
//擴展combobox組件，使其可以支持自動完成功能,重要！！！
$.widget("custom.combobox", {
//本人猜測這個方法應該是創建該組件時調用的，實踐證明也是的，即$("#combobox").combobox();這句話
_create : function() {
console.log("call _create");
this.wrapper = "";
}
});
</script>
<script type="text/javascript">
$(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" ];
var objects = [ {
label : "America",
value : "美國"
}, {
label : "China",
value : "中國"
}, {
label : "Japan",
value : "日本"
} ];
var categories = [ {
label : "anders",
category : ""
}, {
label : "andreas",
category : ""
}, {
label : "antal",
category : ""
}, {
label : "annhhx10",
category : "Products"
}, {
label : "annk K12",
category : "Products"
}, {
label : "annttop C13",
category : "Products"
}, {
label : "anders andersson",
category : "People"
}, {
label : "andreas andersson",
category : "People"
}, {
label : "andreas johnson",
category : "People"
} ];
var autocomplete = $("#tags").autocomplete({
//設置自動完成輸入框的數據源，可以是字符串數組，可以使對象數組，也可以是url字符串(返回一個json數據)
//如果是對象數組，每個對象可以有兩個屬性，label和value，label代表顯示的值，value代表選中後填入輸入框的值，數據過濾是過濾label的
//source : availableTags,//為什麽設置成url後就不能根據用戶輸入過濾數據了呢，而且文件中是對象數組無法自動提示啊
//自動提示框會根據用戶輸入的字符自動篩選符合條件的字符串，默認篩選規則是整個字符串內容包含用戶輸入的字符即符合條件，可以修改這個默認行為
//source如果設置成function函數，函數有兩個參數，第一個參數可以獲取用戶輸入的字符，第二個參數是一個函數，調用這個函數並且傳入一個數組即可，數組即前面所說的數組，但是不能是url了，因為調用response函數已經不會幫我們再次去請求了
source : function(request, response) {
console.log($.ui.autocomplete.escapeRegex(request.term));
//創建一個正則表達式，$.ui.autocomplete.escapeRegex方法說是可以將字符串中的特殊字符作為普通字符處理，即如果傳入的是"[]"，處理後返回"\[\]"，其實就是加了轉義字符而已
//第二個參數"i"表示該正則表達式忽略大小寫比較
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
//$.grep方法可以看做是一個過濾數組元素的方法，將數組中不符合條件的元素剔除
//第一個參數是源數組，第二個參數是一個回調函數，參數是數組的每一項，如果方法返回true，該元素會被加到目的數組中，否則被過濾
response($.grep(availableTags, function(item) {
return matcher.test(item);
}));
},
//這個配置項不知道是幹嘛的。。。
appendTo : "body",
//可以設置成true或者false
//如果設置成true，當下拉列表顯示時，自動聚焦到列表第一項
//如果設置成false，當下拉列表顯示時，將不會自動聚焦，默認為false
autoFocus : true,
//設置下拉列表顯示的延遲時間，單位毫秒，默認值是300
delay : 100,
//設置自動完成框的禁用狀態，true表示禁用，false表示啟用
disabled : false,
//設置搜索的最小字符數，即輸入至少minLength個字符，才會去匹配提示，
//數據比較少的情況下可以設置成0，但是如果數據太多，有幾千條，就需要用這個限制來過濾數據了
minLength : 1,
//設置下拉列表相對於自動完成輸入框的位置
position : {
//設定下拉列表的定位點，即at屬性會以這個點為參照物，設定下拉列表相對於輸入框的位置
//第一個值是水平方向，可選left,right,center
//第二個值是豎直方向，可選left,right,center
my : "left top",
//設定相對位置
at : "left bottom"
},
//擴展點，不知道幹嘛的，沒看見被調用，應該不是這麽使用
_renderItem : function(ul, item) {
alert("_renderItem");
return $("<li>").attr("data-value", item.value).append($("<a>").text(item.label)).appendTo(ul);
},
//擴展點，不知道幹嘛的，沒看見被調用，應該不是這麽使用
_renderMenu : function(ul, items) {
var that = this;
$.each(items, function(index, item) {
that._renderItemData(ul, item);
});
$(ul).find("li:odd").addClass("odd");
},
//擴展點，不知道幹嘛的，沒看見被調用，應該不是這麽使用
_resizeMenu : function() {
this.menu.element.outerWidth(500);
},
//當文本框內容修改後失去焦點時觸發該事件，也可以使用綁定的方式將該事件綁定到提示框上
//autocomplete.on("autocompletechange",function(event,ui){});
//ui.item代表你選中的那一項的對象，包含label和value屬性，如果沒選中ui.item為null
change : function(event, ui) {
if (ui.item == null) {
console.log("No Choose");
} else {
console.log("Choose" + ui.item.value);
}
},
//當智能提示框關閉後會觸發此事件,ui是空對象
close : function(event, ui) {
console.log("close");
},
//當自動完成組件創建時回調此方法,ui是空對象
create : function(event, ui) {
console.log("create");
},
//當提示列表中的某一項獲取焦點時觸發此事件,其中ui.item就是獲得焦點的那一項
//只有使用鍵盤選擇某一項時，才會更新文本框中的值，使用鼠標不更新文本框的值，但是都會觸發此事件
focus : function(event, ui) {
console.log("focus:" + ui.item.value);
},
//當提示列表打開後觸發此事件,ui是空的對象
open : function(event, ui) {
console.log("open");
},
//在search事件觸發之後，列表顯示之前會觸發此事件，其中ui.content是即將顯示在列表中的內容，已經標準化過了，是包含label和value的對象數組
response : function(event, ui) {
console.log("content length:" + ui.content.length);
//在每個對象的label屬性中增加一個索引，使用$.each()方法遍歷對象數組，第一個參數是數組，第二個參數是回調方法，每遍歷一個對象會回調一次該方法，該方法第一個參數是索引，第二個參數是對象，如果該方法返回false，表示跳出遍歷，如果返回true，繼續下一個對象遍歷。
$.each(ui.content, function(i, obj) {
obj.label += i;
if (i == 5) {
return false;
}
});
},
//在minLength滿足後，delay之後會首先觸發該事件，具體作用不詳，傳進來的ui是一個空的對象
search : function(event, ui) {
console.log("search");
},
//當列表中的某一個像被選中後觸發此事件，參數和focus是一樣的
select : function(event, ui) {
console.log("select:" + ui.item.value);
//event.preventDefault();使用這個函數可以阻止事件的默認行為，比如選擇某一項的默認行為就是更新文本框的值，如果調用該方法，則不會更新文本框的值。但是不能阻止列表關閉。
}
});
$("#close").button().click(function() {
autocomplete.autocomplete("close");//關閉智能提示框
});
$("#destroy").button().click(function() {
autocomplete.autocomplete("destroy");//銷毀智能提示框，輸入框將不再具有提示功能
});
$("#disable").button().click(function() {
autocomplete.autocomplete("disable");//禁用智能提示框，輸入框將不再具有提示功能
});
$("#enable").button().click(function() {
autocomplete.autocomplete("enable");//啟用智能提示框，輸入框將不再具有提示功能
});
$("#isDisabled").button().click(function() {
var isDisabled = autocomplete.autocomplete("option", "disabled");//獲取智能提示是否禁用的狀態
console.log("isDisabled:" + isDisabled);
});
$("#option").button().click(function() {
var option = autocomplete.autocomplete("option");//獲取智能提示框所有配置信息
var optionStr = "";
//遍歷配置信息
for ( var p in option) {
optionStr += p + ":" + option[p] + "\n";
}
console.log("Option:\n" + optionStr);
});
$("#setDelay").button().click(function() {
autocomplete.autocomplete("option", "delay", 2000);//設置下拉列表延遲時間為2s
});
$("#search").button().click(function() {
//調用之後會觸發search事件，可以設置回調方法，實踐證明，不能觸發search事件的回調方法，funk，那這個方法作用是啥啊？
autocomplete.autocomplete("search", "");
});
//創建catcomplete組件
$("#catcomplete").catcomplete({
source : categories
});
//創建combobox組件
var combobox = $("#combobox").combobox();
//遍歷一下combobox對象的屬性和方法
var optionStr = "";
for ( var p in combobox) {
optionStr += p + "\n";
}
console.log(optionStr);
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">autocomplete: </label> <input id="tags" />
</div>
<!--
<button id="close">關閉智能提示框</button>
<button id="destroy">銷毀智能提示框</button>
<button id="disable">禁用智能提示</button>
<button id="enable">啟用智能提示</button>
<button id="isDisabled">獲取智能提示是否禁用狀態</button>
<button id="option">獲取智能提示框所有配置信息</button>
<button id="setDelay">設置列表延遲時間</button>
<button id="search">觸發search事件</button>
-->
<div class="ui-widget">
<label for="catcomplete">catcomplete: </label><input id="catcomplete" />
</div>
<div class="ui-widget">
<label>Your preferred programming language: </label> <select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
<button id="toggle">Show underlying select</button>
</body>
</html>
https://www.cnblogs.com/xuxiuxiu/p/5474013.html
轉：JqueryUI學習筆記-自動完成autocomplete