skbkontur/searchpicker

Name: searchpicker

Owner: Kontur

Description: Searchpicker or combo-box dropdown ui form component, written in typescript

Created: 2017-08-07 13:44:35.0

Updated: 2018-03-30 10:55:49.0

Pushed: 2018-03-30 10:55:48.0

Homepage: http://tech.skbkontur.ru/searchpicker/

Size: 280

Language: TypeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

searchpicker

Searchpicker or combo-box dropdown with multiple choices support, written in typescript. No dependencies.

Demo page

How to install

i searchpicker --save

Start local sample

start

Server stared at http://localhost:8080

How to use

Initialize picker control to specified container in your app:

rt {SearchPicker} from 'searchpicker';

t picker = new SearchPicker(document.getElementById('searchpicker-container'), options);

Options

placeholder: string - Default ''

maxSelectedChoices: number - amount of choices that user can select. 1 - single choice. Default - unlimited

minLengthToSearch: number - minimal text length in field length to start search from

searchInValues: boolean - instruct default searcher to search text in picker identifiers. Default - false

resultsLimit: number - maximum shown results. Default - all results returned by searcher.

pickerItemFactory?: (item: any) => IPickerItem - allow to convert source data to picker item for default searcher

source: any[] - data for search with default searcher.

resultRenderer: (item: IPickerItem, query: string) => Node - allow to override default picker item view.

noResultsRenderer: (query: string) => Node - allows to override default view when no results found

choiceRenderer: (item: IPickerItem, renderClose?:boolean) => Node - allow to override default choice view

searcher: ISearcher - allows to add custom logic for result search. For instance: async fetch data from server side.

ISearcher

rt interface ISearcher {
/**
 * Search data
 * @param {string} query                                user query
 * @param {ISearchPickerOptions} options                current searchpicker options
 * @param {(items: IPickerItem[]) => void} onresults    callback with result
 * @param {(message: string) => void} onerror           callback with search error
 */
search(query: string
    , options: ISearchPickerOptions
    , onresults: (items: IPickerItem[]) => void
    , onerror?: (message: string) => void);

Sample of custom data searcher

rt class BackendSearcher implements ISearcher {

private pickerItems: IPickerItem[] = null;
private lastSearchText: string;
private foundItems: IPickerItem[] = [];
private tmrId: number;

search(query: string
    , options: ISearchPickerOptions
    , onresults: (items: IPickerItem[]) => void
    , onerror?: (message: string) => void) {

    if (this.tmrId)
        clearTimeout(this.tmrId);

    // fetch data from server
    fetch("api/search?q=" + query)
        .then((results) => {
            onresults(results.map(r => { return {title: r.title, id: r.login} }));
        }, err => {
            onerror(err);
        });

}

Events

You can subscribe for picker events and read current selected values

choiceAdded

Invokes when user add new choice

t picker = new SearchPicker(...);

er.on("choiceAdded", (item: IPickerItem) => {
onsole.log(picker.getChoices());

choiceRemoved

Invokes when user remove selected choice

t picker = new SearchPicker(...);

er.on("choiceRemoved", (item: IPickerItem) => {
onsole.log(picker.getChoices());

Run e2e tests

run test

Build library

run build:lib