# @ticnat/nativescript-searchable-select

> Add a plugin description

Latest version **2.0.6** (published 2026-04-14) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @ticnat/nativescript-searchable-select
pnpm add @ticnat/nativescript-searchable-select
yarn add @ticnat/nativescript-searchable-select
bun add @ticnat/nativescript-searchable-select
```

## Health

**Score 50/100 (C)** — status: active.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2026-04-14 |
| First published | 2021-02-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 76.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Mohamad Opada Albosh |
| Maintainers | opada-eng |
| Keywords | NativeScript, JavaScript, TypeScript, iOS, Android |

## Links

- npm: https://www.npmjs.com/package/@ticnat/nativescript-searchable-select
- Repository: https://github.com/OPADA-Eng/ticnat-ns-plugins
- Issues: https://github.com/OPADA-Eng/ticnat-ns-plugins/issues
- npm.io page: https://npm.io/package/@ticnat/nativescript-searchable-select

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 2.0.6 (latest) — 2026-04-14
- 2.0.5 — 2022-09-28
- 2.0.4 — 2022-07-25
- 2.0.3 — 2022-07-24
- 2.0.2 — 2022-07-24
- 2.0.1 — 2022-07-24
- 2.0.0 — 2022-07-24
- 1.0.7 — 2021-02-24
- 1.0.6 — 2021-02-24
- 1.0.5 — 2021-02-24
- 1.0.4 — 2021-02-24
- 1.0.3 — 2021-02-23
- 1.0.2 — 2021-02-23
- 1.0.1 — 2021-02-23
- 1.0.0 — 2021-02-20

## README

# @ticnat/nativescript-searchable-select

Since 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
```

# FilterSelect

[![npm](https://img.shields.io/npm/v/@ticnat/nativescript-searchable-select.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ticnat/nativescript-searchable-select)
[![npm](https://img.shields.io/npm/dt/@ticnat/nativescript-searchable-select.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ticnat/nativescript-searchable-select)

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

## Sample Screenshots

#### Android and ios

| Sample 1                                                     | Sample 2                                                          |
| ------------------------------------------------------------ | ----------------------------------------------------------------- |
| ![Sample1](http://codeobia.com/screenshots/filter-label.gif) | ![Sample2](http://codeobia.com/screenshots/ios-filter-select.gif) |

## 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

<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:SS="@ticnat/nativescript-searchable-select"` on the Page element_

### XML

```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:

```XML
<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

```JAVASCRIPT

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

```

### HTML

```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](https://github.com/OPADA-Eng/ticnat-ns-plugins/tree/master/apps/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](https://github.com/OPADA-Eng/ticnat-ns-plugins/blob/master/apps/demo/src/plugin-demos/nativescript-searchable-select.scss) 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](https://github.com/OPADA-Eng/ticnat-ns-plugins/tree/master/apps/demo)

### License

This plugin is built and maintained based on this [plugin](https://github.com/moayadnajd/nativescript-filter-select) and many thanks for [@moayadnajd](https://github.com/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: m.opada.albosh@gmail.com to discuss project details.

---
_Source: https://npm.io/package/@ticnat/nativescript-searchable-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._