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="{% static 'libs/@tarekraafat/autocomplete.js/css/autoComplete.css' %}">

Javascript

<!-- autocomplete js -->
<script src="{% static 'libs/@tarekraafat/autocomplete.js/autoComplete.min.js' %}"></script>

Initjs (Custom js)

<!-- init js -->
<script src="{% static '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

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