searchable-input
A smart selectbox
Feature
- It is a UI library like Select2.
- It does not depend on a framework such as jQuery.
Getting Started
Use directly
- Copy searchable-input.js and searchable-input.css.
- Paste into your app.
Use via Node.js/npm
npm install --save searchable-input
const SearchableInput = ;
Usage
Basic usage
var searchableInputItems = name: '現金および預金' items: id: 0 name: '現金' keywords: 'genkin' id: 1 name: '当座預金' keywords: 'tozayokin' id: 2 name: '普通預金' keywords: 'futsuyokin' id: 3 name: '定期預金' keywords: 'teikiyokin' name: '売上債権' items: id: 4 name: '受取手形' keywords: 'uketoritegata' id: 5 name: '売掛金' keywords: 'urikakekin' ; // input[hidden]のnameをitem_id、// input[hidden]にセットする値をitem.idにしたい場合var searchableInput = document searchableInputItems inputName: 'item_id' inputValueKey: 'id' ; // 選択されたことを検知したい場合(valueが変更されなくても発火する)searchableInput; // 変更を検知したい場合searchableInput;
Generate from select element
ITEM 1 ITEM 2 ITEM 3 ITEM 4 ITEM 5 ITEM 6
document;
data-keywords
attribute requiresJSON.stringify
-ed string as a HTML attribute.
API Document
new SearchableInput()
/** * @param * 第一引数のHTML要素がselect要素の場合、第二引数以降は不要である。 * @param {(Array<{ id, name, keywords, items }>|undefined)} items * 検索候補の一覧、name 必須で id もしくは items のどちらかが必須。 * * * 特に空の値を設定したい場合は、null や undefined` ではなく '' (空文字) 指定する。 * * * @param * @param * (default: el.getAttribute('name') || 'name') * @param * 例えばitem.idをセットしたい場合は{ inputValueKey: 'id' }とすればよい。 * (default: 'name') * @param * パラメータは items 引数の 1 要素と同様。 */ { }
Instance Methods
updateItem(item)
: 選択中の項目を変更する。引数のitem
は{ name, inputValueKeyで指定したキー }
。updateItems(items)
: 項目リストを変更する。
Events
/** * @fires SearchableInput#select 値を選択した場合に発火する。 * (値が変更されないときも発火する。またchangeイベントの前に発火する。) * @fires SearchableInput#change 値が変更された場合に発火する。 * @fires SearchableInput#change.items items を更新した場合に発火する。 * (このときvalueが変わってもchangeイベントは発火しない。) */
Development
Preparation
Installation
yarn install
Release Flow
npm run prepare-releasegit add ./pkggit ci ./pkgnpm version {patch|minor|major}npm publishgit pushgit push --tags