<ui5-combobox placeholder="Enter value">
	<ui5-cb-item text="Item 1"></ui5-cb-item>
	<ui5-cb-item text="Item 2"></ui5-cb-item>
	<ui5-cb-item text="Item 3"></ui5-cb-item>
</ui5-combobox>

<ui5-combobox value-state="Success" value="Item 1">
	<ui5-cb-item text="Item 1"></ui5-cb-item>
	<ui5-cb-item text="Item 2"></ui5-cb-item>
	<ui5-cb-item text="Item 3"></ui5-cb-item>
</ui5-combobox>

<ui5-combobox value-state="Warning" value="Item 2">
	<ui5-cb-item text="Item 1"></ui5-cb-item>
	<ui5-cb-item text="Item 2"></ui5-cb-item>
	<ui5-cb-item text="Item 3"></ui5-cb-item>
</ui5-combobox>

<ui5-combobox value-state="Error" value="Item 3">
	<ui5-cb-item text="Item 1"></ui5-cb-item>
	<ui5-cb-item text="Item 2"></ui5-cb-item>
	<ui5-cb-item text="Item 3"></ui5-cb-item>
</ui5-combobox>
	

<ui5-combobox value="Disabled" disabled>
	<ui5-cb-item text="Item 1"></ui5-cb-item>
	<ui5-cb-item text="Item 2"></ui5-cb-item>
	<ui5-cb-item text="Item 3"></ui5-cb-item>
</ui5-combobox>

<ui5-combobox value="Readonly" readonly>
	<ui5-cb-item text="Item 1"></ui5-cb-item>
	<ui5-cb-item text="Item 2"></ui5-cb-item>
	<ui5-cb-item text="Item 3"></ui5-cb-item>
</ui5-combobox>
	

<ui5-combobox placeholder="Contains" filter="Contains">
	<ui5-cb-item text="Austria"></ui5-cb-item>
	<ui5-cb-item text="Bulgaria"></ui5-cb-item>
	<ui5-cb-item text="Germany"></ui5-cb-item>
	<ui5-cb-item text="United Kingdom"></ui5-cb-item>
	<ui5-cb-item text="Kazakhstan"></ui5-cb-item>
</ui5-combobox>

<ui5-combobox placeholder="Two-column layout">
	<ui5-cb-item text="Austria" additional-text="AT"></ui5-cb-item>
	<ui5-cb-item text="Belgium" additional-text="BE"></ui5-cb-item>
	<ui5-cb-item text="Brazil" additional-text="BR"></ui5-cb-item>
	<ui5-cb-item text="Bulgaria" additional-text="BG"></ui5-cb-item>
	<ui5-cb-item text="Canada" additional-text="CA"></ui5-cb-item>
</ui5-combobox>

<ui5-combobox placeholder="ComboBox with grouping of suggestions">
	<ui5-cb-group-item text="A"></ui5-cb-group-item>
	<ui5-cb-item text="Argentina"></ui5-cb-item>
	<ui5-cb-item text="Australia"></ui5-cb-item>
	<ui5-cb-item text="Austria"></ui5-cb-item>	
	<ui5-cb-group-item text="B"></ui5-cb-group-item>
	<ui5-cb-item text="Bahrain"></ui5-cb-item>
	<ui5-cb-item text="Belgium"></ui5-cb-item>
	<ui5-cb-item text="Brazil"></ui5-cb-item>
	<ui5-cb-group-item text="C"></ui5-cb-group-item>
	<ui5-cb-item text="Canada"></ui5-cb-item>
	<ui5-cb-item text="Chile"></ui5-cb-item>
</ui5-combobox>

<ui5-combobox placeholder="Enter value" id="lazy-cb"></ui5-combobox>

<script>
	const combo = document.getElementById("lazy-cb");

	combo.addEventListener("input", function (event) {
		while (combo.firstChild) {
			combo.removeChild(combo.firstChild);
		}

		event.target.loading = true;

		fetch("https://restcountries.eu/rest/v2/?fields=name")
			.then(function (response) {
				response.json()
					.then(function (list) {

						list.forEach(function (country) {
							const element = document.createElement("ui5-cb-item");

							element.setAttribute("text", country.name);
							combo.appendChild(element);
						});

						event.target.loading = false;

					});
			})
			.catch(function () { });
	});
</script>