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.
- Simple & Easy to use
- Pure Vanilla Javascript
- Zero Dependencies
- Lightweight
- Lightning Fast
- Versatile
- Customizable
- First Class Error Reporting
- Clone autoComplete.js to your local machine using
https://github.com/TarekRaafat/autoComplete.js.git
- Install Dependencies
$ npm i- Development live server
$ npm start- Build Production Package
$ npm run build- jsDelivr CDN
CSS
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@1.2.0/dist/css/autoComplete.css">
</head>JS
<body>
<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@1.2.0/dist/js/autoComplete.min.js"></script>
</body>- 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";- Node.js
const autoComplete = require("./autoComplete");HTML file
- Assign id="autoComplete" to the input filed
<input id="autoComplete" type="text">JS file
- 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;
}
});- That's it, you're ready to go!
For working example of autoComplete.js, visit the Demo.
Or download the Demo files from the /dist folder.
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.
- Chrome
- Firefox
- Safari
- Opera
- Edge
- Chrome
- Safari
For transparency and insight into the release cycle, releases will be numbered with the following format:
<major>.<minor>.<patch>
And constructed with the following guidelines:
- Breaking backwards compatibility bumps the major
- New additions without breaking backwards compatibility bumps the minor
- Bug fixes and misc changes bump the patch
For more information on semantic versioning, please visit http://semver.org/.
-
v1.2.0
- Redesigned the entire search engine for better results
- Added support for Multi-keyword search
-
v1.1.0
- Reduced the library size 97%
(101KB -> 4KB) - Introducing 2 different verions of the library
(pure, minified) - Replaced webpack with Rollup for better bundling
- Fixed some bugs caused problems with node apps
- Reduced the library size 97%
-
v1.0.3
- Refactored & Optimized to reduce size and enhance performance
-
v1.0.2
- Fixed the library name in the webpack.config.js file
-
v1.0.1
- Optimizations Reduced the library weigth by 1KB
-
v1.0.0
- Add customized data attribute tag for generated results
- Highlight matching results from the results list
- Set maximum number for shown results
- Add placeholder text to the input field
- Placeholder keeps the last selection value saved
- Add support for different types of data source
- JS Object
- JSON
- Multidimensional Array
- External data source
(Plugin)
- Multi-keyword Search
- Navigate results list with keyboard
- New designs for inspiration (Ongoing)
- Styles
- Interactions
- Number of results inside input field (Optional)
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:
- Fork it (https://github.com/TarekRaafat/autoComplete.js.git)
- Create your feature branch (
git checkout -b feature/fooBar) - Commit your changes (
git commit -am 'Add some fooBar') - Push to the branch (
git push origin feature/fooBar) - Create a new Pull Request
Tarek Raafat - tarek.m.raafat@gmail.com
Distributed under the Apache 2.0 license. See Apache 2.0 for more information.
https://github.com/TarekRaafat/
Apache 2.0 © Tarek Raafat