Form auto complete
simple input form auto complete
Features
- compatible with other frameworks like
bootstrap
Pre-requirements
- wrapper of
input
must have styleposition: relative
-
autocomplete=off
in input or textarea
Usages
in your html
import css
<!-- import js -->
<link rel="stylesheet" href="dist/style.css" />
<!-- or using development cdn -->
<link rel="stylesheet" href="https://raw.githack.com/dimaslanjaka/light-autocomplete/master/dist/style.css" />
<!-- or using production cdn (change commit hash) -->
<link rel="stylesheet" href="https://rawcdn.githack.com/dimaslanjaka/light-autocomplete/6dab56fc3fdcb5be2c96b4ed3aa7bf5ba1ca2921/dist/style.css" />
import js
<link rel="stylesheet" href="dist/style.css" />
<!-- import js -->
<script src="dist/browser/light-autocomplete.js"></script>
<!-- or using development cdn -->
<script src="https://raw.githack.com/dimaslanjaka/light-autocomplete/master/dist/browser/light-autocomplete.min.js"></script>
<!-- or using production cdn (change commit hash) -->
<script src="https://rawcdn.githack.com/dimaslanjaka/light-autocomplete/6dab56fc3fdcb5be2c96b4ed3aa7bf5ba1ca2921/dist/browser/light-autocomplete.min.js"></script>
declare input
<div style="position: relative;">
<input id="myInput" autocomplete="off" />
</div>
in your js
// generate array string random data auto complete
const randomData = [];
for (let i = 0; i < 1000; i++) {
randomData.push(
Array.from(crypto.getRandomValues(new Uint8Array(10))).reduce(
(s, b) => s + (b % 35).toString(36)[(b % 2) - 1 ? 'toLowerCase' : 'toUpperCase'](),
''
)
// Math.random().toString(36).substring(2, 8 + 2) // generate 8 char
);
}
autocomplete(document.getElementById('myInput'), randomData);
description
autocomplete(inputElement, arrayStringToSearch, wildcard)
-
wildcard
will split your input without vowels and match them -
arrayString
the array to search from your input
Development
open 1st terminal
yarn run dev
open 2nd terminal
yarn run serve
access browser to http://localhost:8080