can-search-select

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 use filterPropName or the item itself;
• format-input, a function to format the input field value.

Customization options:

• placeholder-search, default Enter to Search...;
• placeholder-select, default Choose From the List;
• btnClass, default caret (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.
• 0.2.2:
  • added format-input param.
• 0.2.1:
  • styled dropdown list;
  • use selectedItem for preselection.
• 0.2.0:
  • finalized main params and customization options.