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 @tarekraafat/autocomplete.js --save

Remove Package

npm uninstall @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;
              }
            }
          }
        });