jQuery-ui-autocomplete

時間 2019-12-14

原文原文鏈接

jQuery UI Autocomplete是jQuery UI的自動完成組件，支持本地的Array/JSON數組、經過ajax請求的Array/JSON數組、JSONP、以及Function等方式來獲取數據。javascript

Array數組的簡單例子：php

	<script type="text/javascript" src="jquery-1.10.2.js"></script>
	<script src="jquery.ui.core.js"></script>
	<script src="jquery.ui.widget.js"></script>
	<script src="jquery.ui.position.js"></script>
	<script src="jquery.ui.autocomplete.js"></script>
	<script type="text/javascript">
		$(function(){
			var projects = [
					"JQuery",
					"JavaScript",
					"HTML",
					"PHP",
					"JS"
			];
			$("#tags").autocomplete({
				source : projects,
			});
		})
	</script>
</head>
<body>
	<div class="box">
		<label for="tags">輸入：</label>
		<input id="tags">
	</div>
</body>
</html>

普通數組是沒有特殊要求的，但是JSON則要求有label，value這個兩個屬性html

var projects = [
			{
				value: "這是jquery",
				label: "JQuery",
				desc: "NO",
				icon: "jquery_32x32.png"
			},
			{
				value: "這是javascript",
				label: "JavaScript",
				desc: "Yes",
				icon: "javascript_32x32.png"
			},
			{
				value: "這是PHP",
				label: "PHP",
				desc: "Yes && NO",
				icon: "php_32x32.png"
			}
		];
		$("#tags").autocomplete({
			minLength : 0,
			source : projects,
			focus : function(event, ui){
				$("#tags").val(ui.item.label);
				return false;
			},
			select : function (event, ui){
				$("#tags").val(ui.item.label);
        		$("#tags-description").html(ui.item.desc);
        		$("#tags-icon").attr("src", "images/" + ui.item.icon);
        		return false;
			}
		});
		
<div class="box">
		<label for="tags">輸入</label>
		<input id="tags">
		<div id="tags-description"></div>
		<div id="tags-icon"></div>
</div>

上圖就是點擊選中後對其餘標籤的修改java

在autocompelte中能夠經過ui參數去調用json中的鍵值，同時也能對外部標籤（是指#tags綁定autocomplete之外的標籤）進行修改jquery

autocomplete經常使用參數：ajax

source：能夠是array、function，也能夠是請求地址，就是stringjson

minLength：字符達到minLength時就激活Autocompleteapi

autoFocus：當autocomplete彈出時，自動選擇第一個數組

delay：延遲多少秒後激活Autocokplete函數

經常使用的監聽事件：

1.create(event, ui)：Autocomplete建立時，能夠在此事件中，對外觀進行一些控制

2.search(event, ui)：在開始請求以前，能夠在此事件中返回false來取消請求

3.open(event, ui)：Autocomplete的結果列表彈出時

4.focus(event, ui)：Autocomplete的結果列表任意一項得到焦點時，ui.item爲得到焦點的項

5.select(event, ui)：Autocomplete的結果列表任意一項選中時，ui.item爲選中的項

6.close(event, ui)：Autocomplete的結果列表關閉時

7.change(event, ui)：當值改變時，ui.item爲選中的項

Focus 事件

　　選項中移動的時候，被指向的選項獲得焦點，可是尚未被選中的時候，將會觸發這個事件

Select 事件

　　當一個項目被選中的時候，將會觸發這個事件，默認的處理是使用這個值替換掉輸入框中的內容

自定義的顯示格式，經過_renderItem方法，自定義提示的顯示方式

如下就是autocomplete經過ajax將後臺數據獲取，最終顯示在頁面的案列

上面autocomplete的source屬性設置是function的函數，function有兩個函數：request和response。

request是一個對象，只有一個屬性term，它表明輸入框的值

response是一個回調函數，只有一個參數，就是後臺返回的數據

select函數有默認函數，若是不return false的話，那麼默認的函數也會執行

Jquery ui autocomplete的官方手冊https://api.jqueryui.com/autocomplete/

更多相關文章...

相關標籤/搜索

JQuery

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。