Language selection

Search

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"
	]
}
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: