OverviewOfficial Website

The Autocomplete widgets provides suggestions while you type into the field.The datasource is a simple JavaScript array, provided to the widget using the source-option.

CSS
<!-- datepicker css -->
<link rel="stylesheet" href="assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
Javascript
<!-- datepicker js -->
<script src="assets/libs/@chenfengyuan/datepicker/datepicker.min.js"></script>
Initjs (Custom js)
<!-- init js -->
<script src="assets/js/pages/form-advanced.init.js"></script>
Examples:
Title Javascript
Search Result of Fruit Names 
var autoCompleteFruit = new autoComplete({
selector: "#autoCompleteFruit",
placeHolder: "Search for Fruits...",
data: {
src: ["Apple", "Banana", "Blueberry", "Cherry", "Coconut", "Kiwi", "Lemon", "Lime", "Mango", "Orange"],
cache: true
},
resultsList: {
element: function element(list, data) {
if (!data.results.length) {
// Create "No Results" message element
var message = document.createElement("div");
// Add class to the created element
message.setAttribute("class", "no_result");
// Add message text content
message.innerHTML = "Found No Results for \"" + data.query + "\"";
// Append message element to the results list
list.prepend(message);
}
},
noResults: true
},
resultItem: {
highlight: true
},
events: {
input: {
selection: function selection(event) {
var selection = event.detail.selection.value;
autoCompleteFruit.input.value = selection;
}
}
}
});
Search Result of Car Names 
var autoCompleteCars = new autoComplete({
selector: "#autoCompleteCars",
placeHolder: "Search for Cars...",
data: {
src: ["Chevrolet", "Fiat", "Ford", "Honda", "Hyundai", 
"Hyundai", "Kia", "Mahindra", "Maruti", "Mitsubishi","MG",
"Nissan", "Renault","Skoda", "Tata", "Toyato", "Volkswagen"],
cache: true
},
resultsList: {
element: function element(list, data) {
  if (!data.results.length) {
    // Create "No Results" message element
    var message = document.createElement("div");
    // Add class to the created element
    message.setAttribute("class", "no_result");
    // Add message text content
    message.innerHTML = "Found No Results for \"" + data.query + "\"";
    // Append message element to the results list
    list.prepend(message);
  }
},
noResults: true
},
resultItem: {
highlight: true
},
events: {
input: {
  selection: function selection(event) {
    var selection = event.detail.selection.value;
    autoCompleteCars.input.value = selection;
  }
}
}
});
© Minible.