can-search-select
v0.3.0
Published
Dropdown select component with a search option
Downloads
30
Maintainers
Readme
can-search-select
CanJS component for a dropdown select with a search
To try out the demo open demo.html
file in browser.
Example
Your page template can look like this:
<can-import from="can-search-select" />
<can-search-select {items}="items"
filter-prop-name="companyName"
{format}="@format"
{format-input}="@formatInput"
{^selected-item}="selectedItem" />
Your view model can look like this:
const vm = new DefineMap({
selectedItem: null,
items: [{
companyName: 'Alphabet',
issuanceName: 'Preferred Series A',
price: '1,494'
}],
format (item) {
return item.companyName + ', ' + item.issuanceName + ', price: ' + item.price;
},
formatInput (item) {
return item.companyName;
}
})
There is also a simple dropdown select without a search:
<can-import from="can-search-select/can-select" />
<can-select {items}="items"
display-prop-name="companyName"
{^selected-item}="selectedItem" />
API
can-search-select
Main props:
items
, a list of source items;selected-item
, the selected item, can also be used for preselection;filter-prop-name
, string, a property name to search against;format
, a function that receives the selected item and returns a value for rendering in the input, default will usefilterPropName
or the item itself;format-input
, a function to format the input field value.
Customization options:
placeholder-search
, defaultEnter to Search...
;placeholder-select
, defaultChoose From the List
;btnClass
, defaultcaret
(for TwBootstrap caret).
can-select
Simple dropdown select:
items
, a list of source items;selected-item
, the selected item, can also be used for preselection;filter-prop-name
, string, a property name to use for displaying.
Usage
ES6 use
With StealJS, you can import this module directly in a template that is autorendered:
import 'can-search-select';
CommonJS use
Use require
to load can-search-select
and everything else
needed to create a template that uses can-search-select
:
require("can-search-select");
Standalone use
Load the global
version of the plugin:
<script src='./node_modules/can-search-select/dist/global/can-search-select.js'></script>
Release Notes
0.3.0
:- added a simple dropdown select (w/o search)
can-select
component.
- added a simple dropdown select (w/o search)
0.2.2
:- added
format-input
param.
- added
0.2.1
:- styled dropdown list;
- use
selectedItem
for preselection.
0.2.0
:- finalized main params and customization options.