rgarciaseija / autocomplete.js Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tarekraafat/autocomplete.js

1.0 1.0 0.0 1.39 MB

Simple autocomplete pure vanilla Javascript library.

License: Apache License 2.0

JavaScript 100.00%

autocomplete.js's Introduction

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

Get Started

Clone:

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

Setup:

Install Dependencies

$ npm i

Development live server

$ npm start

Build Production Package

$ npm run build

Installation:

jsDelivr CDN

CSS

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/[email protected]/dist/css/autoComplete.css">

</head>

JS

<body>
	
<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/[email protected]/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");

How to use:

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!

Example

For working example of autoComplete.js, visit the Demo.

Or download the Demo files from the /dist folder.

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.

Browser Support

Desktop

Chrome
Firefox
Safari
Opera
Edge

Mobile

Chrome
Safari

Versioning

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/.

Release History

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
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