維新生活日記

http://jqueryui.com/demos/autocomplete/

可以指定source為某一個URL

傳出的參數名稱：term

代表使用者輸入的關鍵字

回傳的格式：JSON

範例：http://jqueryui.com/demos/autocomplete/search.php?term=a

格式：

[ { "id": "Botaurus stellaris", "label": "Great Bittern", "value": "Great Bittern" }, { "id": "Podiceps nigricollis", "label": "Black-necked Grebe", "value": "Black-necked Grebe" }, { "id": "Nycticorax nycticorax", "label": "Black-crowned Night Heron", "value": "Black-crowned Night Heron" }, { "id": "Netta rufina", "label": "Red-crested Pochard", "value": "Red-crested Pochard" }, { "id": "Circus cyaneus", "label": "Hen Harrier", "value": "Hen Harrier" }, { "id": "Circus pygargus", "label": "Montagu`s Harrier", "value": "Montagu`s Harrier" }, { "id": "Tetrao tetrix", "label": "Black Grouse", "value": "Black Grouse" }, { "id": "Perdix perdix", "label": "Grey Partridge", "value": "Grey Partridge" }, { "id": "Porzana porzana", "label": "Spotted Crake", "value": "Spotted Crake" }, { "id": "Crex crex", "label": "Corncrake", "value": "Corncrake" }, { "id": "Grus grus", "label": "Common Crane", "value": "Common Crane" }, { "id": "Recurvirostra avosetta", "label": "Avocet", "value": "Avocet" } ]

上述格式可以利用：DataTable.toJSON產出

$( "#birds" ).autocomplete({

source: "search.php",

minLength: 2,

select: function( event, ui ) {

log( ui.item ?

"Selected: " + ui.item.value + " aka " + ui.item.id :

"Nothing selected, input was " + this.value );

}

});