Autocomplete

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

<!-- autocomplete css -->
<link rel="stylesheet" href="/assets/libs/@tarekraafat/autocomplete.js/css/autoComplete.css">

Javascript

<!-- autocomplete js -->
<script src="/assets/libs/@tarekraafat/autocomplete.js/autoComplete.min.js"></script>

Initjs (Custom js)

<!-- init js -->
<script src="/assets/js/pages/form-advanced.init.js"></script>

Add Package

npm i autocomplete --save

Remove Package

npm uninstall autocomplete or you can removing specific package from package.json

Examples

Title Javascript

Search Result of Fruit Names

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; } } } });

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;
          }
        }
      }
    });