-
- -
autoComplete.js
- -> Simple autocomplete pure vanilla Javascript library. :rocket: Live Demo **v9.0** - -autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed, high versatility and seamless integration with a wide range of projects & systems, made for users and developers in mind. - -## Features - -- Pure Vanilla Javascript -- Zero Dependencies -- Simple & Easy to use -- Extremely Lightweight -- Blazing Fast -- Versatile -- Hackable & highly customizable - -[](https://codepen.io/tarekraafat/pen/rQopdW?editors=0010) - -## 1. Get Started - -### Clone: - -- Clone autoComplete.js to your local machine - -```shell -git clone https://github.com/TarekRaafat/autoComplete.js.git -``` - -### Setup: - -1. Install Dependencies - -```shell -npm i -``` - -2. For Development - -```shell -npm run dev -``` - -3. Build Production Package - -```shell -npm run build -``` - -### Installation: - --
CDN
-
-`CSS`
-
-```html
-
-```
-
-`JS`
-
-```html
-
-```
-
-- 
CDN
-
-`CSS`
-
-```html
-
-```
-
-`JS`
-
-```html
-
-```
-
-- 
CDN
-
-`CSS`
-
-```html
-
-```
-
-`JS`
-
-```html
-
-```
-
-- 
HTML Local load
-
-```html
-
-```
-
-- HTML Local load - ES6 module `(Use with Import)`
-
-```html
-
-```
-
-- 
Import module ES6
-
-```js
-import autoComplete from "./autoComplete";
-```
-
-- install `(Node Package Manager)`
-
-```shell
-npm i @tarekraafat/autocomplete.js
-```
-
-- 
install `(Javascript Package Manager)`
-
-```shell
-yarn add @tarekraafat/autocomplete.js
-```
-
-- 
Node.js
-
-```js
-const autoComplete = require("@tarekraafat/autocomplete.js/dist/js/autoComplete");
-```
-
-### How to use:
-
-> HTML file
-
-1. Place the `CSS` stylesheet inside the `HEAD` tag
-
-```html
-
-OR
-
-```
-
-2. Assign the default `id` value `"autoComplete"` to the desired input field or use any custom `id/class` and configure the API selector accordingly in `Step 4`
-
-```html
-
-```
-
-3. Place autoComplete `JS` file & the custom `JS` file at the bottom `BODY` tag
-
-```html
-
-
-OR
-
-
-```
-
-> Custom JS file
-
-4. Create new instance of autoComplete engine and configure it `NOT all API configurations are required`
-
-```js
-new autoComplete({
- data: { // Data src [Array, Function, Async] | (REQUIRED)
- src: async () => {
- // API key token
- const token = "this_is_the_API_token_number";
- // User search query
- const query = document.querySelector("#autoComplete").value;
- // Fetch External Data Source
- const source = await fetch(`https://www.food2fork.com/api/search?key=${token}&q=${query}`);
- // Format data into JSON
- const data = await source.json();
- // Return Fetched data
- return data.recipes;
- },
- key: ["title"],
- cache: false
- },
- query: { // Query Interceptor | (Optional)
- manipulate: (query) => {
- return query.replace("pizza", "burger");
- }
- },
- sort: (a, b) => { // Sort rendered results ascendingly | (Optional)
- if (a.match < b.match) return -1;
- if (a.match > b.match) return 1;
- return 0;
- },
- placeHolder: "Food & Drinks...", // Place Holder text | (Optional)
- selector: "#autoComplete", // Input field selector | (Optional)
- observer: true, // Input field observer | (Optional)
- threshold: 3, // Min. Chars length to start Engine | (Optional)
- debounce: 300, // Post duration for engine to start | (Optional)
- searchEngine: "strict", // Search Engine type/mode | (Optional)
- resultsList: { // Rendered results list object | (Optional)
- container: source => {
- source.setAttribute("id", "food_list");
- },
- destination: "#autoComplete",
- position: "afterend",
- element: "ul"
- },
- maxResults: 5, // Max. number of rendered results | (Optional)
- highlight: {
- render: true, // Highlight matching results | (Optional)
- }
- resultItem: { // Rendered result item | (Optional)
- content: (data, source) => {
- source.innerHTML = data.match;
- },
- element: "li"
- },
- noResults: (dataFeedback, generateList) => {
- // Generate autoComplete List
- generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
- // No Results List Item
- const result = document.createElement("li");
- result.setAttribute("class", "no_result");
- result.setAttribute("tabindex", "1");
- result.innerHTML = `Found No Results for "${dataFeedback.query}"`;
- document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
- },
- onSelection: feedback => { // Action script onSelection event | (Optional)
- console.log(feedback.selection.value.image_url);
- }
-});
-```
-
-### API Configuration:
-
-- -| Keys | Description | Values | Default | -| -------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `data` | Data Source, Data Key, Data Caching & Data Results | `Object` with 4 methods
**1- src**:
- `Array` of `Strings` / `Objects`
**OR**
- `Function` ( ) => `Array` of `Strings` / `Objects`
**2- key**:
- `Array` of `Strings`
**Required** if `src` is `Object`, for search to point to desired `keys`
**3- Cache**:
- `true` for static data `src`
- `false` for dynamic data `src` "API" with queries
**4- Results**:
- `Function` (resultsList) => `Array` of `Strings` / `Objects` | Data `src` | -| `trigger` | Engine event & condition trigger | `Object` with 2 methods
**1- event**:
- `Array` of event name `Strings`
**2- condition**:
- `Boolean`
**OR**
- `Function` (even, query) => `Boolean` | 1- event: `["input"]`
2- condition:
`Function` => (query.length > this.threshold && query !== " ")` | -| `query` | Query Interceptor | `Object` with 1 method
1- manipulate: `Function` (inputValue) => `String` | `Raw` Input Value | -| `sort` | Sort rendered results | **-** `Function` (firstResult, secondResult) => { ... } | `false` **(Random Results)** | -| `placeHolder` | Place Holder text | **-** `String` | Blank / Empty | -| `selector` | Input field selector | **-** `String` `id`/`class`
**OR**
**-** `Function` ( ) => `document.querySelector("")` | `"#autoComplete"` | -| `observer` | Input field observer | **-** `Boolean` | `false` | -| `threshold` | Minimum characters length before engine starts rendering results | **-** `Number` | `1` | -| `debounce` | Minimum duration after typing idle state for engine to kick in | **-** `Number`
In milliseconds value | `0` | -| `searchEngine` | Search Engine Type/Mode | **-** `"strict"` lowerCase string
**OR**
**-** `"loose"` lowerCase string
**OR**
**-** customEngine `Function` (query, record) => `each match individually` | `"strict"` | -| `diacritics` | Search Engine Diacritics handler | **-** `Boolean` | `false` | -| `resultsList` | Rendered results list destination, position, element & navigation | `Object` with 8 methods
1- render: `Boolean`
2- container:
`Function` (source) => { ... }
3- destination:
**-** `String` `(id/class/tag)` value
**OR**
**-** `Function` ( ) => `document.querySelector("")`
4- position:
`"beforebegin"`, `"afterbegin"`, `"beforeend"`, `"afterend"` lowerCase string
5- element:
- `String` tag `(ul/span/div/etc..)` value
6- idName: `String`
7- className: `String`
8- navigation: `Function` (event, input, resListElement, onSelection, resListData) => { ... } | 1- render: `true`
2- container: (source) => { ... }
3- destination: `"#autoComplete"`
4- position: `"afterend"`
5- element: `"ul"`
6- idName: `"autoComplete_list"`
7- className: `"autoComplete_list"`
8- navigation: `default` | -| `resultItem` | Rendered result Item content & element | `Object` with 4 methods
1- content:
**-** `Function` (data, source) => { ... }
**-** `data.match` has to be used for **Highlighted** result
2- element:
- `String` tag `(li/span/div/etc..)`
3- idName: `String`
4- className: `String` | 1- content: `(data, source)` => { ... }
2- element: `"li"`
3- idName: `"autoComplete_result"`
4- className: `"autoComplete_result"` | -| `noResults` | Action script on noResults found | **-** `Function` (list, query) => { ... } | No Action | -| `selection` | Format selected result item | `Object` with 1 method
1- className: `String` | 1- className: `autoComplete_selected` | -| `highlight` | Highlight matching results | `Object` with 2 methods
1- render: `Boolean`
2- className: `String` | 1- render: `false`
2- className: `autoComplete_highlighted` | -| `maxResults` | Maximum number of displayed results | **-** `Number` (Integer) | `5` | -| `feedback` | Action script on dataFeedback event | **-** `Function` (data) => { ... } | No Action | -| `onSelection` | Action script onSelection event | **-** `Function` (feedback) => { ... } | No Action | - -1. That's it, you're ready to go! - -* * * - -### Life Cycle Events: - -1. `init`: Fires after "autoComplete.js" engine is initialized -2. `fetch`: Fires after fetching data is complete -3. `input`: Fires on every user input -4. `results`: Fires after search is done and matching results are ready -5. `open`: Fires after opening the results list -6. `navigate`: Fires on every "resultsList" navigation interaction -7. `close`: Fires on "resultsList" close -8. `unInit`: Fires after "autoComplete.js" engine is un-initialized - -* * * - -## 2. Examples - -- Live working [Demo] - - -- Try it on [
](https://codepen.io/tarekraafat/pen/rQopdW?editors=0010)
-
-[demo]: https://tarekraafat.github.io/autoComplete.js/demo/
-
-- Download [Demo] files locally from `/dist` folder
-
-* * *
-
-## 3. Third-Party Plugins
-
-- [Contao autoComplete.js Bundle](https://github.com/heimrichhannot/contao-autocompletejs-bundle) by [@heimrichhannot](https://github.com/heimrichhannot)
-
-* * *
-
-## 4. 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][so tag].
-
-
-
-[stack overflow]: https://stackoverflow.com/
-
-[@tarekraafat]: https://twitter.com/TarekRaafat
-
-[so tag]: https://stackoverflow.com/questions/tagged/autoComplete.js
-
-* * *
-
-## 5. Browsers Support
-
-| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Samsung | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Opera Mini | [
](http://godban.github.io/browsers-support-badges/)Electron |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Edge | last version | last version | last version | last version | last version | last version | last version | last version |
-
-* * *
-
-## 6. What's New in v9.0?
-
-Check out Releases Information :sparkles:
-
-* * *
-
-## 7. Roadmap
-
-### Functionality:
-
-- [x] Add support for different types of data source
- - [x] Function
- - [x] JSON
- - [x] Array of Object
- - [x] External data source via Promises & Async/Await function
-- [x] Multi-keyword Search
-- [x] Different types/modes of Search Logic
-- [x] Choose different results render destination & position
-- [x] Sort rendered results
-- [x] Results list Keyboard `ARROW` or `TAB` Navigation
-- [x] Enhance error Handling (Ongoing)
-- [x] Number of matching results
-- [x] Fetching dynamically External API data source
-- [x] Multiple searchable `keys` for data `src`
-- [x] Event emitter on input field events
-- [x] Handling large data sets
-- [x] Event emitter fires on cleared empty input field state
-- [x] `Query` Interception & Manipulation
-- [x] Improve `Promise` usage for external data source handling
-- [x] Add support for `Diacritics`
-- [x] Input field Observer
-- [ ] Automatic deep search over all keys in multiple nested object data source
-
-### Usability:
-
-- [x] Avail Gzip files options
-- [x] Comprehensive data feedback on user selection
-- [x] Dynamic input field selector
-- [x] Minimum characters length before results start getting rendered for more focused results
-- [x] No matches found response & text
-- [x] API for Rendered result item customization
-- [x] API for Rendered results list customization
-- [x] Capability for multiple instances
-- [x] Render `results` in default case
-- [x] Render `resultsList` & `resultItem` in different/custom elements
-- [x] HTML elements `ContentEditable` Input Support
-- [x] Serve results without rendering list through `resultsList.render` API
-- [x] Custom Search Engine Capability
-- [x] `ShadowDom` Support
-- [x] API support for `customNavigation`
-- [x] API support for `customEventTriggers` & `customTriggerConditions`
-- [x] Better `resultsList` navigation [Without loosing cursor]
-- [x] Add event emitters for navigation
-- [x] Life Cycle Events
-- [ ] Add more use examples & cases of the library to the documentation
-- [ ] Better code compression / optimization for the library to squeeze it back under `[5kb]`
-
-### Plugins:
-
-- [ ] Recent / Most Searches
-- [ ] Inline Suggestions
-- [ ] Input Tags
-- [ ] Virtual Scrolling
-- [ ] Results List Category Separator
-- [ ] `IndexedDB` for large data sets handling & offline usage
-- [ ] Themes / Styles & Interactions
-
-### Styles:
-
-- [x] autoComplete.js default style
-- [x] Neutral style [01]
-- [x] Light style [02]
-
-### Reported Issues:
-
-- [ ] Duplicated results when using multiple data source `keys`
-
-* * *
-
-## 8. Contribution
-
-> Contributions are always more than welcome!
-
-If you have any ideas, just [open an issue](https://github.com/TarekRaafat/autoComplete.js/issues) 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 (
+
+# Page not found
+
+
\ No newline at end of file
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
deleted file mode 100644
index 6815415c..00000000
--- a/docs/_coverpage.md
+++ /dev/null
@@ -1,22 +0,0 @@
-
- 
-
-
-> Simple autocomplete pure vanilla Javascript library. Live Demo **v9.0**
-
-autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed,high versatility and seamless integration with a wide range of projects & systems. - -
-
-- - - -
- - - -[GitHub](https://github.com/TarekRaafat/autoComplete.js) -[Get Started](#introduction) - - diff --git a/docs/_sidebar.md b/docs/_sidebar.md new file mode 100644 index 00000000..6128a73f --- /dev/null +++ b/docs/_sidebar.md @@ -0,0 +1,17 @@ +- [ Introduction](/ "autoComplete.js - Vanilla Javascript library") +- [
Getting Started
](getting-started.md "Getting Started - Documentation | autoComplete.js")
+-
+ - [ Installation](installation.md "Installation | autoComplete.js")
+ - [ Usage](usage.md "Usage | autoComplete.js")
+ - [ Configuration](configuration.md "Configuration | autoComplete.js")
+ - [ Playground](playground.md "Playground | autoComplete.js")
+- Extras
+-
+ - [ Plugins](plugins.md "Plugins | autoComplete.js")
+ - [ Browser Support](browsers-support.md "Browser Support | autoComplete.js")
+ - How-to Guides (Coming Soon)
+- References
+-
+ - [ Support](support.md "Support | autoComplete.js")
+ - [ Releases](releases.md "Releases | autoComplete.js")
+ - [ Contributions](contributions.md "Contributions | autoComplete.js")
diff --git a/docs/assets/fonts/prestashop-icon-font.eot b/docs/assets/fonts/prestashop-icon-font.eot
new file mode 100644
index 00000000..41ced916
Binary files /dev/null and b/docs/assets/fonts/prestashop-icon-font.eot differ
diff --git a/docs/assets/fonts/prestashop-icon-font.ttf b/docs/assets/fonts/prestashop-icon-font.ttf
new file mode 100644
index 00000000..7074370b
Binary files /dev/null and b/docs/assets/fonts/prestashop-icon-font.ttf differ
diff --git a/docs/assets/fonts/prestashop-icon-font.woff b/docs/assets/fonts/prestashop-icon-font.woff
new file mode 100644
index 00000000..5db97d81
Binary files /dev/null and b/docs/assets/fonts/prestashop-icon-font.woff differ
diff --git a/docs/assets/ps-icon-pack.min.css b/docs/assets/ps-icon-pack.min.css
new file mode 100644
index 00000000..a06e3326
--- /dev/null
+++ b/docs/assets/ps-icon-pack.min.css
@@ -0,0 +1,408 @@
+@charset "UTF-8";
+[class*=" ps-icon-"]:before, [class^=ps-icon-]:before, [data-ps-icon]:before {
+ font-family: prestashop-icon-font !important;
+ font-style: normal !important;
+ font-weight: 400 !important;
+ font-variant: normal !important;
+ text-transform: none !important;
+ speak: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale
+}
+
+.ps-icon {
+ display: inline-block;
+ vertical-align: middle;
+ position: relative;
+ top: 1px;
+ font-size: 18px;
+ margin-right: 5px;
+}
+
+@font-face {
+ font-family: prestashop-icon-font;
+ src: url(fonts/prestashop-icon-font.eot);
+ src: url(fonts/prestashop-icon-font.eot?#iefix) format("embedded-opentype"), url(fonts/prestashop-icon-font.woff) format("woff"), url(fonts/prestashop-icon-font.ttf) format("truetype"), url(fonts/prestashop-icon-font.svg#prestashop-icon-font) format("svg");
+ font-weight: 400;
+ font-style: normal
+}
+
+[data-ps-icon]:before {
+ content: attr(data-ps-icon)
+}
+
+.ps-icon-aim:before {
+ content: "a"
+}
+
+.ps-icon-arto:before {
+ content: "b"
+}
+
+.ps-icon-aws:before {
+ content: "c"
+}
+
+.ps-icon-baidu:before {
+ content: "d"
+}
+
+.ps-icon-basecamp:before {
+ content: "e"
+}
+
+.ps-icon-bebo:before {
+ content: "f"
+}
+
+.ps-icon-behance:before {
+ content: "g"
+}
+
+.ps-icon-bing:before {
+ content: "h"
+}
+
+.ps-icon-blip:before {
+ content: "i"
+}
+
+.ps-icon-blogger:before {
+ content: "j"
+}
+
+.ps-icon-bnter:before {
+ content: "k"
+}
+
+.ps-icon-brightkite:before {
+ content: "l"
+}
+
+.ps-icon-cinch:before {
+ content: "m"
+}
+
+.ps-icon-cloudapp:before {
+ content: "n"
+}
+
+.ps-icon-coroflot:before {
+ content: "o"
+}
+
+.ps-icon-creative-commons:before {
+ content: "p"
+}
+
+.ps-icon-dailybooth:before {
+ content: "q"
+}
+
+.ps-icon-delicious:before {
+ content: "r"
+}
+
+.ps-icon-designbump:before {
+ content: "s"
+}
+
+.ps-icon-designfloat:before {
+ content: "t"
+}
+
+.ps-icon-designmoo:before {
+ content: "u"
+}
+
+.ps-icon-deviantart:before {
+ content: "v"
+}
+
+.ps-icon-digg:before {
+ content: "w"
+}
+
+.ps-icon-digg-alt:before {
+ content: "x"
+}
+
+.ps-icon-diigo:before {
+ content: "y"
+}
+
+.ps-icon-dribbble:before {
+ content: "z"
+}
+
+.ps-icon-dropbox:before {
+ content: "A"
+}
+
+.ps-icon-drupal:before {
+ content: "B"
+}
+
+.ps-icon-dzone:before {
+ content: "C"
+}
+
+.ps-icon-ebay:before {
+ content: "D"
+}
+
+.ps-icon-ember:before {
+ content: "E"
+}
+
+.ps-icon-etsy:before {
+ content: "F"
+}
+
+.ps-icon-evernote:before {
+ content: "G"
+}
+
+.ps-icon-facebook:before {
+ content: "H"
+}
+
+.ps-icon-facebook-alt:before {
+ content: "I"
+}
+
+.ps-icon-facebook-places:before {
+ content: "J"
+}
+
+.ps-icon-facto:before {
+ content: "K"
+}
+
+.ps-icon-feedburner:before {
+ content: "L"
+}
+
+.ps-icon-flickr:before {
+ content: "M"
+}
+
+.ps-icon-folkd:before {
+ content: "N"
+}
+
+.ps-icon-formspring:before {
+ content: "O"
+}
+
+.ps-icon-forrst:before {
+ content: "P"
+}
+
+.ps-icon-foursquare:before {
+ content: "Q"
+}
+
+.ps-icon-friendfeed:before {
+ content: "R"
+}
+
+.ps-icon-friendster:before {
+ content: "S"
+}
+
+.ps-icon-gdgt:before {
+ content: "T"
+}
+
+.ps-icon-github:before {
+ content: "U"
+}
+
+.ps-icon-github-alt:before {
+ content: "V"
+}
+
+.ps-icon-goodreads:before {
+ content: "W"
+}
+
+.ps-icon-google:before {
+ content: "X"
+}
+
+.ps-icon-google-buzz:before {
+ content: "Y"
+}
+
+.ps-icon-google-talk:before {
+ content: "Z"
+}
+
+.ps-icon-gowalla:before {
+ content: "0"
+}
+
+.ps-icon-gowalla-alt:before {
+ content: "1"
+}
+
+.ps-icon-grooveshark:before {
+ content: "2"
+}
+
+.ps-icon-hacker-news:before {
+ content: "3"
+}
+
+.ps-icon-hi5:before {
+ content: "4"
+}
+
+.ps-icon-hype-machine:before {
+ content: "5"
+}
+
+.ps-icon-hyves:before {
+ content: "6"
+}
+
+.ps-icon-icq:before {
+ content: "7"
+}
+
+.ps-icon-identi:before {
+ content: "8"
+}
+
+.ps-icon-instapaper:before {
+ content: "9"
+}
+
+.ps-icon-itunes:before {
+ content: "!"
+}
+
+.ps-icon-kik:before {
+ content: "\""
+}
+
+.ps-icon-krop:before {
+ content: "#"
+}
+
+.ps-icon-last:before {
+ content: "$"
+}
+
+.ps-icon-linkedin:before {
+ content: "%"
+}
+
+.ps-icon-linkedin-alt:before {
+ content: "&"
+}
+
+.ps-icon-livejournal:before {
+ content: "'"
+}
+
+.ps-icon-lovedsgn:before {
+ content: "("
+}
+
+.ps-icon-meetup:before {
+ content: ")"
+}
+
+.ps-icon-metacafe:before {
+ content: "*"
+}
+
+.ps-icon-ming:before {
+ content: "+"
+}
+
+.ps-icon-mister-wong:before {
+ content: ","
+}
+
+.ps-icon-mixx:before {
+ content: "-"
+}
+
+.ps-icon-mixx-alt:before {
+ content: "."
+}
+
+.ps-icon-mobileme:before {
+ content: "/"
+}
+
+.ps-icon-msn-messenger:before {
+ content: ":"
+}
+
+.ps-icon-myspace:before {
+ content: ";"
+}
+
+.ps-icon-myspace-alt:before {
+ content: "<"
+}
+
+.ps-icon-newsvine:before {
+ content: "="
+}
+
+.ps-icon-official:before {
+ content: ">"
+}
+
+.ps-icon-openid:before {
+ content: "?"
+}
+
+.ps-icon-orkut:before {
+ content: "@"
+}
+
+.ps-icon-pandora:before {
+ content: "["
+}
+
+.ps-icon-path:before {
+ content: "]"
+}
+
+.ps-icon-paypal:before {
+ content: "^"
+}
+
+.ps-icon-photobucket:before {
+ content: "_"
+}
+
+.ps-icon-picasa:before {
+ content: "`"
+}
+
+.ps-icon-picassa:before {
+ content: "{"
+}
+
+.ps-icon-pinboard:before {
+ content: "|"
+}
+
+.ps-icon-ping:before {
+ content: "}"
+}
+
+.ps-icon-pingchat:before {
+ content: "~"
+}
+
+.ps-icon-playstation:before {
+ content: "\\"}.ps-icon-plixi:before{content:" \e000 "}.ps-icon-plurk:before{content:" \e001 "}.ps-icon-podcast:before{content:" \e002 "}.ps-icon-posterous:before{content:" \e003 "}.ps-icon-qik:before{content:" \e004 "}.ps-icon-quik:before{content:" \e005 "}.ps-icon-quora:before{content:" \e006 "}.ps-icon-rdio:before{content:" \e007 "}.ps-icon-readernaut:before{content:" \e008 "}.ps-icon-reddit:before{content:" \e009 "}.ps-icon-retweet:before{content:" \e00a "}.ps-icon-robo:before{content:" \e00b "}.ps-icon-rss:before{content:" \e00c "}.ps-icon-scribd:before{content:" \e00d "}.ps-icon-sharethis:before{content:" \e00e "}.ps-icon-simplenote:before{content:" \e00f "}.ps-icon-skype:before{content:" \e010 "}.ps-icon-slashdot:before{content:" \e011 "}.ps-icon-slideshare:before{content:" \e012 "}.ps-icon-smugmug:before{content:" \e013 "}.ps-icon-soundcloud:before{content:" \e014 "}.ps-icon-spotify:before{content:" \e015 "}.ps-icon-squarespace:before{content:" \e016 "}.ps-icon-squidoo:before{content:" \e017 "}.ps-icon-steam:before{content:" \e018 "}.ps-icon-stumbleupon:before{content:" \e019 "}.ps-icon-technorati:before{content:" \e01a "}.ps-icon-threewords:before{content:" \e01b "}.ps-icon-tribe:before{content:" \e01c "}.ps-icon-tripit:before{content:" \e01d "}.ps-icon-tumblr:before{content:" \e01e "}.ps-icon-twitter:before{content:" \e01f "}.ps-icon-twitter-alt:before{content:" \e020 "}.ps-icon-vcard:before{content:" \e021 "}.ps-icon-viddler:before{content:" \e022 "}.ps-icon-vimeo:before{content:" \e023 "}.ps-icon-virb:before{content:" \e024 "}.ps-icon-w3:before{content:" \e025 "}.ps-icon-whatsapp:before{content:" \e026 "}.ps-icon-wikipedia:before{content:" \e027 "}.ps-icon-windows:before{content:" \e028 "}.ps-icon-wists:before{content:" \e029 "}.ps-icon-wordpress:before{content:" \e02a "}.ps-icon-wordpress-alt:before{content:" \e02b "}.ps-icon-xing:before{content:" \e02c "}.ps-icon-yahoo:before{content:" \e02d "}.ps-icon-yahoo-buzz:before{content:" \e02e "}.ps-icon-yahoo-messenger:before{content:" \e02f "}.ps-icon-yelp:before{content:" \e030 "}.ps-icon-youtube:before{content:" \e031 "}.ps-icon-youtube-alt:before{content:" \e032 "}.ps-icon-zerply:before{content:" \e033 "}.ps-icon-zootool:before{content:" \e034 "}.ps-icon-zynga:before{content:" \e035 "}.ps-icon-aim-alt:before{content:" \e036 "}.ps-icon-amazon:before{content:" \e037 "}.ps-icon-app-store:before{content:" \e038 "}.ps-icon-apple:before{content:" \e039 "}.ps-icon-girl:before{content:" \e03a "}.ps-icon-girl-sad:before{content:" \e03b "}.ps-icon-girl-confused:before{content:" \e03c "}.ps-icon-bank-safe:before{content:" \e03d "}.ps-icon-shopping-cart:before{content:" \e03e "}.ps-icon-blaster:before{content:" \e03f "}.ps-icon-helm:before{content:" \e040 "}.ps-icon-boiled-egg:before{content:" \e041 "}.ps-icon-boiled-egg-finger:before{content:" \e042 "}.ps-icon-cart:before{content:" \e043 "}.ps-icon-coin:before{content:" \e044 "}.ps-icon-coins:before{content:" \e045 "}.ps-icon-couple:before{content:" \e046 "}.ps-icon-credit-card:before{content:" \e047 "}.ps-icon-crown:before{content:" \e048 "}.ps-icon-daft-punk:before{content:" \e049 "}.ps-icon-dollar-bill:before{content:" \e04a "}.ps-icon-dollars:before{content:" \e04b "}.ps-icon-music:before{content:" \e04c "}.ps-icon-headphones:before{content:" \e04d "}.ps-icon-headset:before{content:" \e04e "}.ps-icon-egg:before{content:" \e04f "}.ps-icon-fried-egg:before{content:" \e050 "}.ps-icon-euro-bill:before{content:" \e051 "}.ps-icon-extinguisher:before{content:" \e052 "}.ps-icon-fuck:before{content:" \e053 "}.ps-icon-full-screen:before{content:" \e054 "}.ps-icon-gamepad:before{content:" \e055 "}.ps-icon-girl-2:before{content:" \e056 "}.ps-icon-girl-angel:before{content:" \e057 "}.ps-icon-girl-angry:before{content:" \e058 "}.ps-icon-girl-big-smile:before{content:" \e059 "}.ps-icon-girl-cry:before{content:" \e05a "}.ps-icon-girl-flushed:before{content:" \e05b "}.ps-icon-girl-open-mouth:before{content:" \e05c "}.ps-icon-girl-sleep:before{content:" \e05d "}.ps-icon-girl-smile:before{content:" \e05e "}.ps-icon-girl-user:before{content:" \e05f "}.ps-icon-guy:before{content:" \e060 "}.ps-icon-guy-angel:before{content:" \e061 "}.ps-icon-guy-angry:before{content:" \e062 "}.ps-icon-guy-big-smile:before{content:" \e063 "}.ps-icon-guy-confused:before{content:" \e064 "}.ps-icon-guy-cry:before{content:" \e065 "}.ps-icon-guy-flushed:before{content:" \e066 "}.ps-icon-guy-happy:before{content:" \e067 "}.ps-icon-guy-o-mouth:before{content:" \e068 "}.ps-icon-girl-o-mouth:before{content:" \e069 "}.ps-icon-guy-open-mouth:before{content:" \e06a "}.ps-icon-guy-sad:before{content:" \e06b "}.ps-icon-guy-sleep:before{content:" \e06c "}.ps-icon-guy-smile:before{content:" \e06d "}.ps-icon-guy-user:before{content:" \e06e "}.ps-icon-guy-wrong:before{content:" \e06f "}.ps-icon-hand:before{content:" \e070 "}.ps-icon-hand-pointer-left:before{content:" \e071 "}.ps-icon-hand-pointer-right:before{content:" \e072 "}.ps-icon-hand-pointer-top:before{content:" \e073 "}.ps-icon-mayo-hotdog:before{content:" \e074 "}.ps-icon-hotdog:before{content:" \e075 "}.ps-icon-hungry:before{content:" \e076 "}.ps-icon-enlarge:before{content:" \e077 "}.ps-icon-laptop:before{content:" \e078 "}.ps-icon-mail:before{content:" \e079 "}.ps-icon-mail-back:before{content:" \e07a "}.ps-icon-mail-bill:before{content:" \e07b "}.ps-icon-mail-stamp:before{content:" \e07c "}.ps-icon-moon:before{content:" \e07d "}.ps-icon-music-score:before{content:" \e07e "}.ps-icon-open-padlock:before{content:" \e07f "}.ps-icon-organisation:before{content:" \e080 "}.ps-icon-padlock:before{content:" \e081 "}.ps-icon-paper-tablet:before{content:" \e082 "}.ps-icon-pdiddy:before{content:" \e083 "}.ps-icon-people-team:before{content:" \e084 "}.ps-icon-piggy-bank:before{content:" \e085 "}.ps-icon-piggy-bank-coins:before{content:" \e086 "}.ps-icon-power:before{content:" \e087 "}.ps-icon-printer:before{content:" \e088 "}.ps-icon-promo:before{content:" \e089 "}.ps-icon-puzzle:before{content:" \e08a "}.ps-icon-resize:before{content:" \e08b "}.ps-icon-road:before{content:" \e08c "}.ps-icon-rss-icon:before{content:" \e08d "}.ps-icon-safe:before{content:" \e08e "}.ps-icon-sale-tag:before{content:" \e08f "}.ps-icon-save:before{content:" \e090 "}.ps-icon-shield:before{content:" \e091 "}.ps-icon-store:before{content:" \e092 "}.ps-icon-sign:before{content:" \e093 "}.ps-icon-sreenshot:before{content:" \e094 "}.ps-icon-sun:before{content:" \e095 "}.ps-icon-cart-supermarket:before{content:" \e096 "}.ps-icon-tag:before{content:" \e097 "}.ps-icon-token:before{content:" \e098 "}.ps-icon-delete:before{content:" \e099 "}.ps-icon-user:before{content:" \e09a "}.ps-icon-wallet:before{content:" \e09b "}.ps-icon-watch:before{content:" \e09c "}.ps-icon-30-80:before{content:" \e09d "}.ps-icon-40-105:before{content:" \e09e "}.ps-icon-50-120:before{content:" \e09f "}.ps-icon-60-140:before{content:" \e0a0 "}.ps-icon-70-160:before{content:" \e0a1 "}.ps-icon-95-200:before{content:" \e0a2 "}.ps-icon-airplane:before{content:" \e0a3 "}.ps-icon-any-solvent:before{content:" \e0a4 "}.ps-icon-any-solvent-without-tetrachlorethylene:before{content:" \e0a5 "}.ps-icon-attachment:before{content:" \e0a6 "}.ps-icon-warning:before{content:" \e0a7 "}.ps-icon-barrel:before{content:" \e0a8 "}.ps-icon-bike:before{content:" \e0a9 "}.ps-icon-triangle:before{content:" \e0aa "}.ps-icon-broken-link:before{content:" \e0ab "}.ps-icon-bubble:before{content:" \e0ac "}.ps-icon-prison-school-bus:before{content:" \e0ad "}.ps-icon-car:before{content:" \e0ae "}.ps-icon-cocktail:before{content:" \e0af "}.ps-icon-do-not-bleach:before{content:" \e0b0 "}.ps-icon-do-not-dry:before{content:" \e0b1 "}.ps-icon-do-not-iron:before{content:" \e0b2 "}.ps-icon-do-not-wash:before{content:" \e0b3 "}.ps-icon-do-not-wring:before{content:" \e0b4 "}.ps-icon-double-arrow:before{content:" \e0b5 "}.ps-icon-drip-dry:before{content:" \e0b6 "}.ps-icon-drop:before{content:" \e0b7 "}.ps-icon-dry:before{content:" \e0b8 "}.ps-icon-dry-flat:before{content:" \e0b9 "}.ps-icon-dry-in-the-shade:before{content:" \e0ba "}.ps-icon-dry-normal-hight-heat:before{content:" \e0bb "}.ps-icon-dry-normal-low-heat:before{content:" \e0bc "}.ps-icon-heat:before{content:" \e0bd "}.ps-icon-dry-normal-no-heat:before{content:" \e0be "}.ps-icon-eject:before{content:" \e0bf "}.ps-icon-switch:before{content:" \e0c0 "}.ps-icon-film:before{content:" \e0c1 "}.ps-icon-apps:before{content:" \e0c2 "}.ps-icon-gun:before{content:" \e0c3 "}.ps-icon-hand-wash:before{content:" \e0c4 "}.ps-icon-disabled:before{content:" \e0c5 "}.ps-icon-hang-to-dry:before{content:" \e0c6 "}.ps-icon-hard-drive:before{content:" \e0c7 "}.ps-icon-hourglass:before{content:" \e0c8 "}.ps-icon-important:before{content:" \e0c9 "}.ps-icon-iron-any-temp:before{content:" \e0ca "}.ps-icon-justice:before{content:" \e0cb "}.ps-icon-keyboard:before{content:" \e0cc "}.ps-icon-link:before{content:" \e0cd "}.ps-icon-branch:before{content:" \e0ce "}.ps-icon-liquor:before{content:" \e0cf "}.ps-icon-bus-london:before{content:" \e0d0 "}.ps-icon-machine-wash:before{content:" \e0d1 "}.ps-icon-machine-wash-gentle-or-delicate:before{content:" \e0d2 "}.ps-icon-machine-wash-permanent-press:before{content:" \e0d3 "}.ps-icon-wand:before{content:" \e0d4 "}.ps-icon-magnifying-glass:before{content:" \e0d5 "}.ps-icon-maximum-temp-110-230:before{content:" \e0d6 "}.ps-icon-maximum-temp-150-300:before{content:" \e0d7 "}.ps-icon-maximum-temp-200-390:before{content:" \e0d8 "}.ps-icon-megaphone:before{content:" \e0d9 "}.ps-icon-man:before{content:" \e0da "}.ps-icon-mic:before{content:" \e0db "}.ps-icon-mic-off:before{content:" \e0dc "}.ps-icon-next:before{content:" \e0dd "}.ps-icon-non-chlorine-bleach-if-needed:before{content:" \e0de "}.ps-icon-penknife:before{content:" \e0df "}.ps-icon-petroleum-solvent-steam:before{content:" \e0e0 "}.ps-icon-phone:before{content:" \e0e1 "}.ps-icon-piano:before{content:" \e0e2 "}.ps-icon-pin:before{content:" \e0e3 "}.ps-icon-filter:before{content:" \e0e4 "}.ps-icon-plane:before{content:" \e0e5 "}.ps-icon-previous:before{content:" \e0e6 "}.ps-icon-quote:before{content:" \e0e7 "}.ps-icon-retweet-1:before{content:" \e0e8 "}.ps-icon-sound:before{content:" \e0e9 "}.ps-icon-sound-down:before{content:" \e0ea "}.ps-icon-sound-level-one:before{content:" \e0eb "}.ps-icon-sound-level-two:before{content:" \e0ec "}.ps-icon-sound-plus:before{content:" \e0ed "}.ps-icon-stethoscope:before{content:" \e0ee "}.ps-icon-suitcase:before{content:" \e0ef "}.ps-icon-target:before{content:" \e0f0 "}.ps-icon-ticket:before{content:" \e0f1 "}.ps-icon-trophy:before{content:" \e0f2 "}.ps-icon-tumble-dry:before{content:" \e0f3 "}.ps-icon-ufo:before{content:" \e0f4 "}.ps-icon-video-camera:before{content:" \e0f5 "}.ps-icon-truck-1:before{content:" \e0f6 "}.ps-icon-water-temperature-30:before{content:" \e0f7 "}.ps-icon-water-temperature-40:before{content:" \e0f8 "}.ps-icon-water-temperature-50:before{content:" \e0f9 "}.ps-icon-water-temperature-60:before{content:" \e0fa "}.ps-icon-water-temperature-70:before{content:" \e0fb "}.ps-icon-water-temperature-95:before{content:" \e0fc "}.ps-icon-clothes-water:before{content:" \e0fd "}.ps-icon-woman:before{content:" \e0fe "}.ps-icon-zoom-in:before{content:" \e0ff "}.ps-icon-zoom-out:before{content:" \e100 "}.ps-icon-anchor:before{content:" \e101 "}.ps-icon-left:before{content:" \e102 "}.ps-icon-right:before{content:" \e103 "}.ps-icon-up:before{content:" \e104 "}.ps-icon-down:before{content:" \e105 "}.ps-icon-play:before{content:" \e106 "}.ps-icon-forward:before{content:" \e107 "}.ps-icon-rewind:before{content:" \e108 "}.ps-icon-forbidden:before{content:" \e109 "}.ps-icon-stats:before{content:" \e10a "}.ps-icon-bar-code:before{content:" \e10b "}.ps-icon-lab:before{content:" \e10c "}.ps-icon-beer:before{content:" \e10d "}.ps-icon-bell:before{content:" \e10e "}.ps-icon-book-tag:before{content:" \e10f "}.ps-icon-minus-circle-1:before{content:" \e110 "}.ps-icon-plus-box:before{content:" \e111 "}.ps-icon-minus-box:before{content:" \e112 "}.ps-icon-plus:before{content:" \e113 "}.ps-icon-minus:before{content:" \e114 "}.ps-icon-arrow-right:before{content:" \e115 "}.ps-icon-down-arrow-circle:before{content:" \e116 "}.ps-icon-up-arrow-circle:before{content:" \e117 "}.ps-icon-right-arrow-circle:before{content:" \e118 "}.ps-icon-left-arrow-circle:before{content:" \e119 "}.ps-icon-contrast:before{content:" \e11a "}.ps-icon-align-justified:before{content:" \e11b "}.ps-icon-align-right:before{content:" \e11c "}.ps-icon-align-left:before{content:" \e11d "}.ps-icon-minus-circle:before{content:" \e11e "}.ps-icon-book:before{content:" \e11f "}.ps-icon-label-hogwarts:before{content:" \e120 "}.ps-icon-label:before{content:" \e121 "}.ps-icon-leaf:before{content:" \e122 "}.ps-icon-work-case:before{content:" \e123 "}.ps-icon-bug:before{content:" \e124 "}.ps-icon-building:before{content:" \e125 "}.ps-icon-calendar:before{content:" \e126 "}.ps-icon-calendar-grid:before{content:" \e127 "}.ps-icon-align-centered:before{content:" \e128 "}.ps-icon-camera:before{content:" \e129 "}.ps-icon-check-box-empty:before{content:" \e12a "}.ps-icon-check-box:before{content:" \e12b "}.ps-icon-radio-empty:before{content:" \e12c "}.ps-icon-radio:before{content:" \e12d "}.ps-icon-coffee:before{content:" \e12e "}.ps-icon-coffee-hot:before{content:" \e12f "}.ps-icon-compass:before{content:" \e130 "}.ps-icon-bull-right:before{content:" \e131 "}.ps-icon-bull-left:before{content:" \e132 "}.ps-icon-chat-alt:before{content:" \e133 "}.ps-icon-chat:before{content:" \e134 "}.ps-icon-code:before{content:" \e135 "}.ps-icon-flag-corner:before{content:" \e136 "}.ps-icon-flag-scout:before{content:" \e137 "}.ps-icon-flag:before{content:" \e138 "}.ps-icon-row-setting:before{content:" \e139 "}.ps-icon-copy:before{content:" \e13a "}.ps-icon-file:before{content:" \e13b "}.ps-icon-crop:before{content:" \e13c "}.ps-icon-iphone:before{content:" \e13d "}.ps-icon-ipad:before{content:" \e13e "}.ps-icon-mac:before{content:" \e13f "}.ps-icon-random:before{content:" \e140 "}.ps-icon-arrow-box:before{content:" \e141 "}.ps-icon-scissors:before{content:" \e142 "}.ps-icon-dashboard:before{content:" \e143 "}.ps-icon-world:before{content:" \e144 "}.ps-icon-download:before{content:" \e145 "}.ps-icon-upload:before{content:" \e146 "}.ps-icon-fire:before{content:" \e147 "}.ps-icon-eye:before{content:" \e148 "}.ps-icon-no-eye:before{content:" \e149 "}.ps-icon-folder:before{content:" \e14a "}.ps-icon-clock:before{content:" \e14b "}.ps-icon-mouse:before{content:" \e14c "}.ps-icon-backpack:before{content:" \e14d "}.ps-icon-ipod:before{content:" \e14e "}.ps-icon-iwatch:before{content:" \e14f "}.ps-icon-battery:before{content:" \e150 "}.ps-icon-battery-charge:before{content:" \e151 "}.ps-icon-lightning:before{content:" \e152 "}.ps-icon-image:before{content:" \e153 "}.ps-icon-gift:before{content:" \e154 "}.ps-icon-cutlery:before{content:" \e155 "}.ps-icon-pen:before{content:" \e156 "}.ps-icon-archive:before{content:" \e157 "}.ps-icon-arrow-down:before{content:" \e158 "}.ps-icon-arrow-left:before{content:" \e159 "}.ps-icon-arrow-up:before{content:" \e15a "}.ps-icon-asterisk:before{content:" \e15b "}.ps-icon-browser:before{content:" \e15c "}.ps-icon-check:before{content:" \e15d "}.ps-icon-cloud:before{content:" \e15e "}.ps-icon-download-from-cloud:before{content:" \e15f "}.ps-icon-upload-to-cloud:before{content:" \e160 "}.ps-icon-checked:before{content:" \e161 "}.ps-icon-ambulance:before{content:" \e162 "}.ps-icon-mailbox:before{content:" \e163 "}.ps-icon-plus-circle:before{content:" \e164 "}.ps-icon-truck:before{content:" \e165 "}.ps-icon-girl-sad-hunappy:before{content:" \e166 "}.ps-icon-spades-card:before{content:" \e167 "}.ps-icon-diamonds-card:before{content:" \e168 "}.ps-icon-clubs-card:before{content:" \e169 "}.ps-icon-hearts-card:before{content:" \e16a "}.ps-icon-pull:before{content:" \e16b "}.ps-icon-pant:before{content:" \e16c "}.ps-icon-data-board:before{content:" \e16d "}.ps-icon-board:before{content:" \e16e "}.ps-icon-shoe:before{content:" \e16f "}.ps-icon-globe:before{content:" \e170 "}.ps-icon-pin-map:before{content:" \e171 "}.ps-icon-bonnet:before{content:" \e172 "}.ps-icon-contact:before{content:" \e173 "}.ps-icon-fish:before{content:" \e174 "}.ps-icon-cookie:before{content:" \e175 "}.ps-icon-pizza:before{content:" \e176 "}.ps-icon-birthday:before{content:" \e177 "}.ps-icon-pc:before{content:" \e178 "}.ps-icon-ram:before{content:" \e179 "}.ps-icon-cpu:before{content:" \e17a "}.ps-icon-milkshake:before{content:" \e17b "}.ps-icon-tacos:before{content:" \e17c "}.ps-icon-burger:before{content:" \e17d "}.ps-icon-home:before{content:" \e17e "}.ps-icon-lego:before{content:" \e17f "}.ps-icon-preston:before{content:" \e180 "}
\ No newline at end of file
diff --git a/docs/browsers-support.md b/docs/browsers-support.md
new file mode 100644
index 00000000..b6e643e4
--- /dev/null
+++ b/docs/browsers-support.md
@@ -0,0 +1,6 @@
+# Browsers Support
+autoComplete.js comes with native support for all latest stable versions of current major browsers
+
+| [](http://godban.github.io/browsers-support-badges/)IE / Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari | [](http://godban.github.io/browsers-support-badges/)iOS Safari | [](http://godban.github.io/browsers-support-badges/)Samsung | [](http://godban.github.io/browsers-support-badges/)Opera | [](http://godban.github.io/browsers-support-badges/)Opera Mini | [](http://godban.github.io/browsers-support-badges/)Electron |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Edge | last version | last version | last version | last version | last version | last version | last version | last version |
\ No newline at end of file
diff --git a/docs/configuration.md b/docs/configuration.md
new file mode 100644
index 00000000..427a78e3
--- /dev/null
+++ b/docs/configuration.md
@@ -0,0 +1,522 @@
+# Configuration
+
+API configuration options and events
+
+## Options
+
+#### selector (optional)
+
+***
+
+> Input field selector.
+
+- Type: `String` of [selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) | `Function` (optional)
+
+- Defaults: `#autoComplete`
+
+- Example
+
+
+
+#### ** String **
+```js
+selector: "#autoComplete", // Any valid selector
+```
+
+#### ** Function **
+```js
+selector: () => {
+ return "#customID"; // Any valid selector
+},
+```
+
+
+
+#### data (required)
+
+***
+
+> Data Source.
+
+- Type: `Object`
+- Methods:
+ - src: `Array`|`Function` (required)
+ - key: `Array` (required only if `data.src` is `Array` of `Objects`)
+ - cache: `Boolean` (optional)
+ - results: `Function` (optional)
+ - 1 parameter `(list)` returns `Array` of results values
+
+- Defaults:
+ - src: `null`
+ - key: `null`
+ - cache: `false`
+ - results: No action
+
+- Example:
+
+
+#### ** Array (Strings) **
+
+```js
+data: {
+ src: ["Sauce - Thousand Island", "Wild Boar - Tenderloin", "Goat - Whole Cut"],
+ cache: false
+},
+```
+
+#### ** Array (Objects) **
+
+```js
+data: {
+ src: [
+ { "food": "Sauce - Thousand Island" },
+ { "food": "Wild Boar - Tenderloin" },
+ { "food": "Goat - Whole Cut" }
+ ],
+ key: ["food"],
+ cache: false
+},
+```
+
+#### ** Function **
+
+```js
+data: {
+ src: () => {
+
+ },
+ key: ["food"],
+ cache: false
+},
+```
+
+#### ** Async **
+
+```js
+data: {
+ src: async () => {
+ // Fetch Data from external Source
+ const source = await fetch("https://www.url.com/data.json");
+ const data = await source.json();
+
+ // Returns Fetched data
+ return data;
+ },
+ key: ["food"],
+ cache: true
+},
+```
+
+
+#### trigger (optional)
+
+***
+
+> Engine event & condition trigger.
+
+- Type: `Object`
+- Methods:
+ - event: `Array` of [events](https://developer.mozilla.org/en-US/docs/Web/Events) (optional)
+ - condition: `Function` (optional)
+ - 2 parameters `(event, queryValue)` returns `Boolean`
+
+- Defaults:
+ - event: `["input"]`
+ - condition: if input field **NOT** empty and greater or equal threshold
+
+- Example:
+
+```js
+trigger: {
+ event: ["input"], // Any valid event type name
+ condition: (event, queryValue) => {
+ return queryValue.replace(/ /g, "").length; // Returns "Boolean"
+ }
+},
+```
+
+#### query (optional)
+
+***
+
+> Query interceptor.
+
+- Type: `Object`
+- Methods:
+ - manipulate: `Function` (optional)
+ - 1 parameter `(query)` returns `String`
+
+- Defaults:
+ - manipulate: Returns raw input value
+
+- Example:
+
+```js
+query: {
+ manipulate: (query) => {
+ return query.replace("pizza", "burger");
+ }
+},
+```
+
+#### placeHolder (optional)
+
+***
+
+> Input field place holder text value.
+
+- Type: `String` (optional)
+
+- Defaults: `Blank/Empty`
+
+- Example:
+
+```js
+placeHolder: "Search...",
+```
+
+#### observer (optional)
+
+***
+
+> Input field observer.
+
+- Type: `Boolean` (optional)
+
+- Defaults: `false`
+
+- Example:
+
+```js
+observer: false,
+```
+
+#### threshold (optional)
+
+***
+
+> Minimum characters length before engine starts rendering results.
+
+- Type: `Integer` (optional)
+
+- Defaults: `1`
+
+- Example:
+
+```js
+threshold: 2,
+```
+
+#### debounce (optional)
+
+***
+
+> Minimum duration after typing is in idle state for engine to kick in.
+
+- Type: `Integer` (optional)
+
+- Defaults: `0`
+
+- Example:
+
+```js
+debounce: 300, // Milliseconds value
+```
+
+#### searchEngine (optional)
+
+***
+
+> Search engine Type/Mode.
+
+- Type: `String` | `Function` (optional)
+ - `String` lowerCase `"strict"` | `"loose"`
+ - `Function` with 2 parameters `(query, record)` returns 1 `String` of each match individually
+
+- Defaults: `"strict"`
+
+- Example:
+
+```js
+searchEngine: "strict",
+```
+
+#### diacritics (optional)
+
+***
+
+> Search engine diacritics handler.
+
+- Type: `Boolean` (optional)
+
+- Defaults: `false`
+
+- Example:
+
+```js
+diacritics: "strict",
+```
+
+#### resultsList (optional)
+
+***
+
+> Rendered results list element.
+
+- Type: `Object` (optional)
+
+- Methods:
+ - render: `Boolean` (optional)
+ - element: `String` of [element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) (optional)
+ - idName: `String` of id value (optional)
+ - className: `String` of class value (optional)
+ - destination: `String` of [selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) | `Function` (optional)
+ - position: `String` of [position](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement#parameters) (optional)
+ - container: `Function` (optional)
+ - 1 parameter (element) with no return
+ - maxResults: `Integer` (optional)
+ - navigation: `Function` (optional)
+ - 1 parameter (event) with no return
+ - noResults: `Function` (optional)
+ - 2 parameters (list, query) with no return
+
+- Defaults:
+ - render: `true`
+ - element: `ul`
+ - idName: `autoComplete_list`
+ - className: `autoComplete_list`
+ - destination: `#autoComplete`
+ - position: `afterend`
+ - container: `Function`
+ - maxResults: `5`
+ - navigation: `default` navigation behavior
+ - noResults: No action
+
+- Example:
+
+```js
+resultsList: {
+ render: true,
+ element: "ul",
+ idName: "autoComplete_list",
+ className: "autoComplete_list",
+ destination: "#autoComplete",
+ position: "afterend",
+ maxResults: 5,
+ container: (element) => {
+ element.setAttribute("data-parent", "food-list");
+ },
+ noResults: (list, query) => {
+ // Create no results element
+ const message = document.createElement("li");
+ message.setAttribute("class", "no_result");
+ message.setAttribute("tabindex", "1");
+ // Add text content
+ message.innerHTML = `Found No Results for "${query}"`;
+ // Append message to results list
+ list.appendChild(message);
+ },
+},
+```
+
+#### resultItem (optional)
+
+***
+
+> Rendered result item element.
+
+- Type: `Object` (optional)
+
+- Methods:
+ - element: `String` of [element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) (optional)
+ - idName: `String` of id value (optional)
+ - className: `String` of class value (optional)
+ - content: `Function` (optional)
+ - 2 parameters (item, element) with no return
+ - highlight: `Object` (optional)
+ - render: `Boolean` (optional)
+ - className: `String` of class value (optional)
+ - selected: `Object` (optional>
+ - className: `String` of class value (optional)
+
+- Defaults:
+ - element: `li`
+ - idName: `undefined_[index]`
+ - className: `autoComplete_result`
+ - content: `Function`
+ - highlight:
+ - render: `false`
+ - className: `"autoComplete_highlighted"`
+ - selected:
+ - className: `"autoComplete_selected"`
+
+- Example:
+
+```js
+resultItem: {
+ element: "li",
+ className: "autoComplete_result",
+ content: (item, element) => {
+ element.setAttribute("data-parent", "food-item");
+ },
+ highlight: {
+ render: true,
+ className: "autoComplete_highlighted"
+ },
+ selected: {
+ className: "autoComplete_selected"
+ }
+},
+```
+
+#### feedback (optional)
+
+***
+
+> Action script on dataFeedback event.
+
+- Type: `Function` (optional)
+ - 1 parameter (data) with no return
+
+- Defaults: No action
+
+- Example:
+
+```js
+feedback: (data) => {
+ console.log(data);
+},
+```
+
+#### onSelection (optional)
+
+***
+
+> Action script onSelection event.
+
+- Type: `Function` (optional)
+ - 1 parameter (feedback) with no return
+
+- Defaults: No action
+
+- Example:
+
+```js
+onSelection: (feedback) => {
+ console.log(feedback);
+},
+```
+
+## Events
+
+#### init
+
+***
+
+> Fires after `autoComplete.js` engine is initialized and ready
+
+- Example:
+
+```js
+document.querySelector("#autoComplete").addEventListener("init", function (event) {
+ console.log(event);
+});
+```
+
+#### fetch
+
+***
+
+> Fires after fetching data is complete and data is ready
+
+- Example:
+
+```js
+document.querySelector("#autoComplete").addEventListener("fetch", function (event) {
+ console.log(event.detail);
+});
+```
+
+#### input
+
+***
+
+> Fires on every user input interaction
+
+- Example:
+
+```js
+document.querySelector("#autoComplete").addEventListener("input", function (event) {
+ console.log(event);
+});
+```
+
+#### results
+
+***
+
+> Fires after search operation is done and matching results are ready
+
+- Example:
+
+```js
+document.querySelector("#autoComplete").addEventListener("results", function (event) {
+ console.log(event.detail);
+});
+```
+
+#### open
+
+***
+
+> Fires after opening the results list
+
+- Example:
+
+```js
+document.querySelector("#autoComplete").addEventListener("open", function (event) {
+ console.log(event);
+});
+```
+
+#### navigate
+
+***
+
+> Fires on every "resultsList" navigation interaction
+
+- Example:
+
+```js
+document.querySelector("#autoComplete").addEventListener("navigate", function (event) {
+ console.log(event.detail);
+});
+```
+
+#### close
+
+***
+
+> Fires after "resultsList" is closed
+
+- Example:
+
+```js
+document.querySelector("#autoComplete").addEventListener("close", function (event) {
+ console.log(event);
+});
+```
+
+#### unInit
+
+***
+
+> Fires after `autoComplete.js` engine is un-initialized and detached
+
+- Example:
+
+```js
+document.querySelector("#autoComplete").addEventListener("unInit", function (event) {
+ console.log(event);
+});
+```
diff --git a/docs/contributions.md b/docs/contributions.md
new file mode 100644
index 00000000..bb84651e
--- /dev/null
+++ b/docs/contributions.md
@@ -0,0 +1,18 @@
+# Contributions
+
+***
+
+> Contributions are always more than welcome!
+
+If you have any ideas, just [open an issue](https://github.com/TarekRaafat/autoComplete.js/issues) 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 (