Datalist dynamic suggestion

Load datalist suggestion from a JSON file.

Example

Example with a <template> element

Configuration properties

Note: To reduce the number of HTTP request, the JSON file containing the suggestion are only loaded when the input field receive focus.

Configuration via data attribute defined on datalist element.

data-wb-limit

Maximum number of suggestion item to display

data-wb-filter-type

• any (default) Anywhere
• startWith starting with
• word matching a word

data-wb-suggest

URL of the JSON file with a JSON pointer to the array of suggestion. Example: data/list.json-ld#/suggestions

Events

wb-update.wb-datalist

Trigger when the suggestion in the datalist are updated. Mostly used for the integration with the Datalist polyfill

JSON-LD file sample

{
	"@context":{
		"dc": "http://purl.org/dc/terms/",
		"suggestions": {
			"@id": "http://www.w3.org/2001/XMLSchema#string",
			"@container": "@list"
		}
	},
	"@language": "en",
	"dc:title": "Title of your file containing the suggestion terms",
	"dc:modified": "2021-04-21",

	"suggestions": [
		"Suggestion word 1",
		"Suggestion word 2",
		"Suggestion word 3",
		"Suggestion word 4"
	]
}