autoComplete.js

Introduction

Simple autocomplete pure vanilla Javascript library. rocket Live Demo v3.2

autoComplete.js is a simple pure vanilla Javascript library that’s progressively designed for speed, high versatility and seamless integration with wide range of projects & systems, made for users and developers in mind.

Features

  • Pure Vanilla Javascript
  • Zero Dependencies
  • Simple & Easy to use
  • Extremely Lightweight
  • Blazing Fast
  • Versatile
  • Hackable & highly customizable

autoComplete.js Code Example

1. Get Started

Clone:

  • Clone autoComplete.js to your local machine
git clone https://github.com/TarekRaafat/autoComplete.js.git

Setup:

  1. Install Dependencies
npm i
  • For Development
npm run dev
  • Build Production Package
npm run build

Installation:

  • jsDelivr CDN
CSS

JS
<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@3.2.0/dist/js/autoComplete.min.js"></script>
  • HTML HTML Local load
<script src="./autoComplete.js"></script>
  • HTML HTML Local load – ES6 module (Use with Import)
<script src="./index.js" type="module"></script>
  • Javascript Import module ES6
import autoComplete from "./autoComplete";
  •  install (Node Package Manager)
npm i @tarekraafat/autocomplete.js
  • Node.js Node.js
const autoComplete = require("@tarekraafat/autocomplete.js/dist/js/autoComplete");

How to use:

HTML file

  1. Place the CSS stylesheet inside the HEAD tag

OR


  1. Assign the default id value "autoComplete" to the desired input field or use any custom id/class and configure the API selector accordingly in Step 4
<input id="autoComplete" tabindex="1" type="text" />    <!-- Default "id" value = "autoComplete"> -->
  1. Place autoComplete JS file & the custom JS file at the bottom BODY tag
<script src="./js/autoComplete.min.js"></script>
<script src="./js/index.js"></script>

OR

<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@3.2.0/dist/js/autoComplete.min.js"></script>
<script src="./js/index.js"></script>

Custom JS file

  1. Create new instance of autoComplete engine and configure it NOT all API settings are required
new autoComplete({
    data: { src: data, key: "food" },               // (Array, Object, Function, Async)
    placeHolder: "Food &amp; Drinks...",                // Place Holder text
    selector: "#autoComplete",                      // Input field selector
    threshold: 0,                                   // Min. Chars length to start
    searchEngine: "strict",                         // Search Engine type/mode
    resultsList: {                                  // Rendered results Container, Destination &amp; Position
        container: (source) =&gt; {
            resultsListID = "food_List";
            return resultsListID;
        },
        destination: document.querySelector("#autoComplete"),
        position: "afterend"
    },
    resultItem: (data, source) =&gt; {                 // Rendered result item
        return `${data.match}`;
    },
    highlight: true,                                // Highlight matching results
    maxResults: 5,                                  // Max. number of rendered results
    onSelection: feedback =&gt; {                      // Action script onSelection event
        console.log(feedback);
    }
});

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares