@ticnat/nativescript-searchable-select

Since nativescript changed the way it fill up ObservableArray and breaking changes so For nativescript >= 8.3.0

ns plugin add @ticnat/nativescript-searchable-select

For nativescript < 8.3.0

ns plugin add @ticnat/nativescript-searchable-select@1.0.7

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 7.x

tns plugin add @ticnat/nativescript-searchable-select

import css

@import '@ticnat/nativescript-searchable-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:SS="@ticnat/nativescript-searchable-select" on the Page element

XML

<Page xmlns:SS="@ticnat/nativescript-searchable-select">
   <StackLayout>
     <SS:SearchableSelect
     items="{{ countries }}"
     hint="Please select some countries"
     modal_title="Countries" search_param="name"
     primary_key="code"
     change="{{ onSelect }}"
     />
   </StackLayout>
</Page>

or with inner template option:

<Page xmlns:SS="@ticnat/nativescript-searchable-select">
    <SS:SearchableSelect render="label" selected="{{ selected }}" items="{{ countries }}" hint="Please select some countries" modal_title="Countries" search_param="name" primary_key="code" change="{{ onSelect }}">
          <SS:SearchableSelect.itemTemplate>
            <GridLayout class="item" height="50" columns="*,100">
              <Label col="0" class="text-center" text="{{ name }}" textWrap="true" />
              <Label col="1" class="text-center" text="{{ code }}" textWrap="true" />
            </GridLayout>
          </SS:SearchableSelect.itemTemplate>
        </SS:SearchableSelect>
</Page>

Angular NativeScript

Regiter plugin in Component class


import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from '@ticnat/nativescript-searchable-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
windowHeight	to specify the height of the select window	number : 70
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

License

This plugin is built and maintained based on this plugin and many thanks for @moayadnajd

For contributing

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

Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: [email protected] to discuss project details.