FilterSelect

A NativeScript plugin to provide an listview widget to select AND filter items.

Sample Screenshots

Android and ios

Sample 1 | Sample 2 -------- | --------- |

Installation

NativeScript 4.x

• tns plugin add nativescript-filter-select

import css

@import 'nativescript-filter-select/styles.css';

*Be sure to run a new build after adding plugins to avoid any issues

Vanilla NativeScript

IMPORTANT: Make sure you include xmlns:FS="nativescript-filter-select" on the Page element

XML

<Page xmlns:FS="nativescript-filter-select">
   <StackLayout>     
     <FS:FilterSelect 
     items="{{ countries }}"
     hint="Please select some countries" 
     modal_title="Countries" search_param="name" 
     primary_key="code" 
     change="{{ onSelect }}"
     />
   </StackLayout>
</Page>

Angular NativeScript

Regiter plugin in Component class

import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from 'nativescript-filter-select';
registerElement('FilterSelect', () => FilterSelect);

HTML

    <FilterSelect 
        height="100%"
        [items]="items"
        (change)="onitemselected($event)"
        hint="Please select some items" 
        modal_title="item" search_param="name" 
        primary_key="id">

    </FilterSelect>

Attributes

see demo examples for more information

| Attribute | Description |Default | ------------- | ------------------------------------------------------- |-------- | render | to render "tags" or "label" or "drop" | string : tags | multiple | to limit the options selected to one if set to false | boolean : true |search_param| index of the string value in the items object to search on it |string : name |item_template|xml template for the listview items | string : <Label col="0" text="{{ ${this._search_param} }}" textWrap="true" /> |change| change event treger when select is done | function : optional change(args) and selected item can be accessed as args.selected |modal_title|title of the filter modal | String : Please select items |hint|string to show when no items selected |Please select some items |items|array of objects to populate the list of options | ObservableArray :[] |primary_key|unique index of the items object | string : id |selected|array of objects to mark some options as selected and it will be the result when select is done | Array: [] |disabled| to disable select botton | boolean : false |allowSearch| to enable/disable search bar in the modal | boolean : true |refresh| to refresh the filter select with new values good with remote data | function |searchHint | search placeholder or hint in the items modal | "Search for item" |xbtn| remove tag text you can use tag icon here | "x" |closeText| close button text | "Close" |doneText| done button text | "Done" |clearText| clear button text | "Clear" |selectText| select button text | "Select" | autofocus | keyboard up when you open modal so you can start search | false | open() | open modal programmatically | function |close| close event treger when modal is closed | you can get the selected array by args.selected if the modal closed without any selection the array will be empty

CSS core-theme styles is required for modal page if you dont have them just make your own

see styles.css so you can override or make your own

• and don't forget to share with us your nice styles :D

font icons

• font icons are required if you are using dropdown render

  and you can add fontawsome icon as a select triger ( hint="{{'fa-list-ul' | fonticon}}" )

  see demo

For contributing

just do a pull request with description of your changes or open issue with your ideas

i need help with this issue