Skip to content

icanjs/can-search-select

Repository files navigation

can-search-select

Build Status

CanJS component for a dropdown select with a search

Demo

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.

About

CanJS component for a dropdown select with a search

Resources

License

Stars

Watchers

Forks

Packages

No packages published