@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/[email protected]

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.