searchpicker
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.5 • Public • Published

    searchpicker Build Status

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

    Demo page

    How to install

    npm i searchpicker --save

    Start local sample

    npm start

    Server stared at http://localhost:8080

    How to use

    Initialize picker control to specified container in your app:

    import {SearchPicker} from 'searchpicker';
    
    const 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

    export 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

    export 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

    const picker = new SearchPicker(...);
    
    picker.on("choiceAdded", (item: IPickerItem) => {
       console.log(picker.getChoices());
    });

    choiceRemoved

    Invokes when user remove selected choice

    const picker = new SearchPicker(...);
    
    picker.on("choiceRemoved", (item: IPickerItem) => {
       console.log(picker.getChoices());
    });

    Run e2e tests

    npm run test
    

    Build library

    npm run build:lib

    Keywords

    none

    Install

    npm i searchpicker

    DownloadsWeekly Downloads

    2

    Version

    2.0.5

    License

    MIT

    Unpacked Size

    178 kB

    Total Files

    56

    Last publish

    Collaborators

    • bukharin
    • apocalyp0sys
    • templeoftemplar