2022年11月24日 星期四

jQuery select2 library 使用 AJAX

因為官網沒寫的很清楚,所以特此紀錄

經過不斷嘗試,要讓 select2 處理 AJAX 還要更新他的選單,得這樣寫

$("select").select2({
	ajax: {
		url: "{{the ajax request URL}}",
		dataType: "json",
		data: function (params) {
			return {
				q: params.term
			}
		},
		processResults: function (data) {
			return {results: data} 
		}
	},
})

重點是要確保你輸出的資料格式(或是經過 processResults輸出的結果)是這樣的格式:

{
	"$schema": "http://json-schema.org/draft-04/schema#",
	"type": "object",
	"properties": {
		"results": {
			"type": "array",
			"items": [
				{
					"type": "object",
					"properties": {
						"id": {
							"type": ["string", "number"]
						},
						"text": {
							"type": "string"
						}
					},
					"required": [
						"id",
						"text"
					]
				}
			]
		}
	},
	"required": [
		"results"
	]
}

例如:

{
	"results": [
		{
			"id": 1, "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
		},
		{
			"id": 2, "text": "Vestibulum sagittis ipsum id felis porta ultricies."
		}
	]
}

沒有留言:

張貼留言