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
yarn add @tarekraafat/autocomplete.js --save
Remove Package
yarn remove @tarekraafat/autocomplete.js or you can remove package by removing specific package from package.json
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;
          }
        }
      }
    });
© Velzon.
Design & Develop by Themesbrand