autoComplete.js ✨

Simple autocomplete pure vanilla Javascript library. Demo

autoComplete.js is a simple pure vanilla Javascript library that's built for speed, high versatility and seamless integration with wide range of projects & systems.

Features

• Simple & Easy to use
• Pure Vanilla Javascript
• Zero Dependencies
• Lightweight
• Lightning Fast
• Versatile
• Customizable

Get Started

Install:

1. Install Dependencies

$ npm i

2. Development live server

$ npm start

3. Build Production Package

$ npm run build

How to use:

HTML file

1. Assign id="autoComplete" to the input filed

<input id="autoComplete" type="text">

JS file

2. Create new instance of autoComplete engine

// The app instance creator

new autoComplete({
	dataSrc: grocery,	    // Array data source
	placeHolder: "Try me ...",  // Place Holder text
	maxNum: 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;
	}
});

3. That's it, you're ready to go!

---

Release History

• v1.0.0
  • Add customized data tags for generated results
  • Highlight matching results
  • Set maximum number for shown results
  • Add placeholder text to the input field
  • Placeholder keeps the last selection value

---

Roadmap

Functionality:

• Navigate results list with keyboard
• Add support for different types of data source
  • JS Object
  • JSON
  • Multidimensional Array
• Multi-keyword Search

Interface:

• New designs for inspiration (Ongoing)
  • Styles
  • Interactions
• Number of results inside input field (Optional)

---

Author

Tarek Raafat - [email protected]

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

https://github.com/TarekRaafat/

---

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

---

License

Apache 2.0 © Tarek Raafat