as24-autocomplete
Build your autocomplete from the building blocks. Put input, data source and suggestions list inside the as24-autocomplete
and you get it. For the moment we have these:
- Input (as24-autocomplete-input)
- Suggestions lists (more info)
- Plain list (as24-plain-suggestions-list)
- Grouped list (as24-grouped-suggestions-list)
- Data sources (more info)
- Plain data source (as24-plain-data-source)
- Grouped data source (as24-grouped-suggestions-list)
Please, check the demo out.
Getting Started
Run the demo
npm install
gulp dev
Goto: http://localhost:3000
How to include in your project
npm install --save-dev as24-autocomplete
Include the scripts into your build process:
All at once:
;
... or just what is needed:
const input = ;const dataSource = ;const list = ;const dispatcher = ; ;;;;
Using the second approach can save you a few KBs. But... it's up to you.
Include the styles into your project. You can use SASS module importer (this one for example)
Or just @import
it from node_modules
:
Example
This is how you add the autocomplete itself:
<!-- <ul class="as24-autocomplete__list"></ul> --> <!-- ... -->
Migrations
Migration to 2.x
The new components has been introduced so that you can configure your autocomplete. These are:
as24-plain-suggestions-list
as24-grouped-suggestions-list
as24-plain-data-source
as24-grouped-items-data-source
When you use as24-grouped-items-data-source
you should place the items within group
element.
Please, check the demo out
Migration to 1.x
Please, pay attention to data-role="user-query"
and data-role="value"
attributes for the inputs.
The End
Happy autocompleting :)