ac-box
no-dependency, lightweight autocomplete combobox UI library (demo)
short usage:
var inputEl = document acbox = inputEl acbox
Installation
Node
npm install ac-box
var AcBox =
When using with Browserify, babelily
and babel-preset-es2015
are required.
Browser
Download via npm
or releases and load standalone build version dist/ac-box.js
Styling
Position related CSS properties will be configured automatically.
On the other hand, decoration related properties like border
or background-color
will not be configured automatically,
so we have to configure CSS for menu container element or menu elements, etc. see source of demo
API
new AcBox(inputEl[, options])
Make specified inputEl
to autocomplete combobox.
inputEl
need to be HTMLInputElement
.
options
need to be object
and following property are available:
-
{
array.<string>
}menus
- Menus for suggestions. Default value is[]
. Menus must bearray
ofstring
like['Alice', 'Bob', 'Carol']
. -
{
string
}menuContainerClass
- Class name for menus container element. Default value isac-menu-container
. -
{
string
}menuClass
- Class name for each menu element. Default value isac-menu
. -
{
string
}deleterClass
- Class name for delete button. Default value isac-deleter
-
{
string
}expanderClass
- Class name for expand/collaspe button. Default value isac-expander
AcBox#setMenus(menus)
Reset menus with specified menus
.
- {
array.<string>
}menus
AcBox#destroy()
Destroy DOM elements and inner objects related to ac-box.
License
MIT (c) keik