Nativescript-filter-select NPM

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