chore: fix input sample (#1431)

SAP · Apr 6, 2020 · 0089db4 · 0089db4
1 parent e40a68a
commit 0089db4
Showing 1 changed file with 39 additions and 31 deletions.
diff --git a/packages/main/test/samples/Input.sample.html b/packages/main/test/samples/Input.sample.html
@@ -41,19 +41,23 @@ <h3>Basic Input</h3>
 </section>
 
 <section>
-	<h3>Input With Suggestions (Note: the usage depends on the framework you are using)</h3>
+	<h3>Input With Suggestions (note: the usage depends on the framework you are using)</h3>
 	<div class="snippet">
-		<ui5-input id="suggestions-input" class="samples-responsive-padding-bottom" placeholder="Start typing country name" show-suggestions>
-		</ui5-input>
+		<ui5-input
+			id="suggestions-input"
+			class="samples-responsive-padding-bottom"
+			placeholder="Start typing country name"
+			show-suggestions
+		></ui5-input>
 
 		<script>
-			var ui5_database_entries =  ["Argentina", "Albania", "Algeria", "Angola", "Austria",  "Australia", "Bulgaria", "Canada", "Columbia", "Croatia", "Denmark",
-"England", "Finland", "France", "Germany", "Hungary", "Ireland", "Italy", "Kuwait", "Luxembourg", "Mexico", "Morocco", "Norway", "Paraguay", "Philippines", "Portugal", "Spain", "Sweden", "Sri Lanka", "Senegal", "United Kingdom", "USA" ];
+			var input = document.getElementById("suggestions-input");
 
-			var oInput = document.getElementById("suggestions-input");
+			var ui5_database_entries = ["Argentina", "Albania", "Algeria", "Angola", "Austria",  "Australia", "Bulgaria", "Canada", "Columbia", "Croatia", "Denmark",
+	"England", "Finland", "France", "Germany", "Hungary", "Ireland", "Italy", "Kuwait", "Luxembourg", "Mexico", "Morocco", "Norway", "Paraguay", "Philippines", "Portugal", "Spain", "Sweden", "Sri Lanka", "Senegal", "United Kingdom", "USA" ];
 
-			oInput.addEventListener("input", function(event) {
-				var value = event.target.value;
+			input.addEventListener("input", function(event) {
+				var value = input.value;
 				var suggestionItems = [];
 
 				if (value) {
@@ -62,16 +66,18 @@ <h3>Input With Suggestions (Note: the usage depends on the framework you are usi
 					});
 				}
 
-				[].slice.call(oInput.children).forEach(function(child) {
-					oInput.removeChild(child);
+				[].slice.call(input.children).forEach(function(child) {
+					input.removeChild(child);
 				});
 
 				suggestionItems.forEach(function(item) {
 					var li = document.createElement("ui5-suggestion-item");
 					li.icon = "world";
-					li.id = item;
+					li.info = "explore";
+					li.infoState = "Success";
+					li.description = "travel the world";
 					li.text = item;
-					oInput.appendChild(li);
+					input.appendChild(li);
 				});
 			});
 		</script>
@@ -80,34 +86,36 @@ <h3>Input With Suggestions (Note: the usage depends on the framework you are usi
 <ui5-input id="suggestions-input" show-suggestions placeholder="Start typing country name"></ui5-input>
 
 <script>
-	// Add some suggestions, can receive them from back end as well
-	var ui5_database_entries = ["Argentina", "Albania", "Algeria", "Angola", "Austria",  "Australia", "Bulgaria", "Canada", "Columbia", "Croatia", "Denmark",
-	"England", "Finland", "France", "Germany", "Hungary", "Ireland", "Italy", "Kuwait", "Luxembourg", "Mexico", "Morocco", "Norway", "Paraguay", "Philippines", "Portugal", "Spain", "Sweden", "Sri Lanka", "Senegal", "United Kingdom", "USA" ];
+	// data
+	var ui5_database_entries = ["Argentina", "Bulgaria", "Canada", "Columbia", "Croatia", "Denmark", '...'];
+
+	var input = document.getElementById("suggestions-input");
+
+	// listen for the input event
+	input.addEventListener("input", event => {
+		var value = input.value;
+		var suggestionItems = [];
 
-	var oInput = document.getElementById("suggestions-input");
-	// Listen for the input event
-	oInput.addEventListener("input", function() {
-		var value = event.target.value;
-		var suggestionItems = Array();
-		// Find the new suggestions
 		if (value) {
-			suggestionItems = ui5_database_entries.filter(function (item) {
+			suggestionItems = ui5_database_entries.filter(item => {
 				return item.toUpperCase().indexOf(value.toUpperCase()) === 0;
 			});
 		}
-		// Clear the current suggestions
-		[].slice.call(oInput.children).forEach(function(child) {
-			if (child.id !== "user-icon") {
-				oInput.removeChild(child);
-			}
+
+		// remove the previous suggestions
+		[].slice.call(input.children).forEach(child => {
+			input.removeChild(child);
 		});
-		// Add the new suggestions in the DOM
-		suggestionItems.forEach(function(item) {
+
+		// add the new suggestions according to the  user input
+		suggestionItems.forEach(item => {
 			var li = document.createElement("ui5-suggestion-item");
 			li.icon = "world";
-			li.id = item;
+			li.info = "explore";
+			li.infoState = "Success";
+			li.description = "travel the world";
 			li.text = item;
-			oInput.appendChild(li);
+			input.appendChild(li);
 		});
 	});
 </script>