autoComplete.js - Pure Vanilla Javascript libraryUpdated on 2018-12-21

autoComplete.js

:sparkles:

License
Build Status
GitHub version
npm version

\[Zero Dependencies\]()
\[Size\]()
Open Source Love


autoComplete.js Design


Simple autocomplete pure vanilla Javascript library. Live Demo

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

  • Simple & Easy to use
  • Pure Vanilla Javascript
  • Zero Dependencies
  • Lightweight
  • Lightning Fast
  • Versatile
  • Customizable
  • First Class Error Handling & Reporting

autoComplete.js Code Example

1. Get Started

Clone:

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

Setup:

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

Installation:

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@1.5.3/dist/css/autoComplete.min.css"/>

JS

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

How to use:

HTML file

  1. Assign id="autoComplete" to the input filed
<input id="autoComplete" type="text">

JS file

  1. Create new instance of autoComplete engine
new autoComplete({
    dataSrc: grocery,          // Array data source
    searchEngine: "strict",   // Search Engine type
    threshold: 0,               // Min. Chars length before Engine starts
    renderResults: {             // Results Destination & position
        destination: document.querySelector("#autoComplete"),
        position: "afterend"
    },
    placeHolder: "Try me...",   // Place Holder text
    maxResults: 10,              // Max number of results
    highlight: true,            // Highlight matching results
    dataAttribute: {
        tag: "set",              // Data attribute tag
        value: "value"         // Data attribute value
    },
    onSelection: value => {   // Action script onClick event
        document.querySelector(".selection").innerHTML = value.id;
    }
});

API Configurations:


Features Description Values Default
dataSrc Data Source Array or
Function => Array
Required
searchEngine Search Engine Type/Mode strict or loose lowerCase string strict
threshold Minimum characters length before engine starts rendering results Number 0
renderResults Rendered results destination & position Object of two methods:
1- html element selector: document.querySelector("#div")
2- position:
beforebegin, afterbegin, beforeend, afterend
{destination: document.querySelector("#autoComplete"), position: "afterend"}
placeHolder Place Holder text String Blank / Empty
maxResults Maximum number of displayed results Number 5
highlight Highlight matching results Boolean false
dataAttribute Data Attribute tag Object {tag: "autoComplete", value: ""}
onSelection Action script onClick event Function No Action
  1. That's it, you're ready to go!

2. Examples

3. Support

For general questions about autoComplete.js, tweet at @TarekRaafat.

For technical questions, you should post a question on Stack Overflow and tag
it with autoComplete.js.

4. Browsers Support

IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari iOS SafariiOS Safari SamsungSamsung OperaOpera Opera MiniOpera Mini ElectronElectron
Edge last version last version last version last version last version last version last version last version

5. What's New?

Releases Information

6. Roadmap

Functionality:

  • [ ] Add support for different types of data source
    • [x] Function
    • [ ] External data source
  • [x] Multi-keyword Search
  • [x] Different types/modes of Search Logic
  • [x] Choose different results render destination & position
  • [x] Minimum characters length before results start getting rendered for more focused results
  • [ ] Sort rendered results
    • [ ] Alphabet
    • [ ] Distance
  • [ ] Dynamic input field selector

Usability:

  • [ ] New designs for inspiration (Ongoing)
    • [x] Styles
    • [x] Interactions
  • [ ] Number of results displayed
  • [ ] Navigate results list with keyboard
  • [ ] Inline autocomplete input with nearest result
  • [ ] No matches found response & text

7. Contribution

Contributions are always more than welcome!

If you have any ideas, just open an issue and tell me what you think.

  • Please fork the repository and make changes as you'd like. Pull requests are warmly welcome.

If you'd like to contribute:

  1. Fork it (https://github.com/TarekRaafat/autoComplete.js.git)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

8. Author

Tarek Raafat

Distributed under the Apache 2.0 license. See Apache 2.0 for more information.

9. License

Apache 2.0 © Tarek Raafat