autoComplete.js - Pure Vanilla Javascript library

autoComplete.js :sparkles:

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

1. Development live server

$ npm start

1. Build Production Package

$ npm run build

How to use:

1. Instantiate autoComplete engine
2. Configure it as shown below
3. You're ready to go

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

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 different types of data source (Objects, Multidimensional Arrays, etc...)
• Multi-Search

Interface:

• Show number of results inside text field
• Change input field Color
• Change input field Icon

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