Nativescript plugin for making a select component with a lot of features
npm install @ticnat/nativescript-searchable-selectSince nativescript changed the way it fill up ObservableArray and breaking changes so
For nativescript >= 8.3.0
``javascript`
ns plugin add @ticnat/nativescript-searchable-select
For nativescript < 8.3.0
`javascript`
ns plugin add @ticnat/nativescript-searchable-select@1.0.7
A NativeScript plugin to provide an listview widget to select AND filter items.
#### Android and ios
| Sample 1 | Sample 2 |
| ------------------------------------------------------------ | ----------------------------------------------------------------- |
| !Sample1 | !Sample2 |
##### NativeScript 7.x
- tns plugin add @ticnat/nativescript-searchable-select
@import '@ticnat/nativescript-searchable-select/styles.css';
\*Be sure to run a new build after adding plugins to avoid any issues
IMPORTANT: _Make sure you include xmlns:SS="@ticnat/nativescript-searchable-select" on the Page element_
`XML`
hint="Please select some countries"
modal_title="Countries" search_param="name"
primary_key="code"
change="{{ onSelect }}"
/>
or with inner template option:
`XML`
`JAVASCRIPT
import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from '@ticnat/nativescript-searchable-select';
registerElement('FilterSelect', () => FilterSelect);
`
`HTML
[items]="items"
(change)="onitemselected($event)"
hint="Please select some items"
modal_title="item" search_param="name"
primary_key="id">
`
| 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 : |change(args)
| change | change event treger when select is done | function : optional and selected item can be accessed as args.selected |Please select items
| modal_title | title of the filter modal | String : |Please select some items
| hint | string to show when no items selected | |id
| items | array of objects to populate the list of options | ObservableArray :[] |
| primary_key | unique index of the items object | string : |args.selected` if the modal closed without any selection the array will be empty |
| 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
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 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
This plugin is built and maintained based on this plugin and many thanks for @moayadnajd
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: m.opada.albosh@gmail.com to discuss project details.