{"id":18709944,"url":"https://github.com/moayadnajd/nativescript-filter-select","last_synced_at":"2025-04-12T11:16:38.150Z","repository":{"id":57308524,"uuid":"91478721","full_name":"moayadnajd/nativescript-filter-select","owner":"moayadnajd","description":"A NativeScript plugin to provide an listview widget to select AND filter items","archived":false,"fork":false,"pushed_at":"2023-04-18T12:27:44.000Z","size":23835,"stargazers_count":37,"open_issues_count":20,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T11:16:25.564Z","etag":null,"topics":["nativescript","nativescript-plugin"],"latest_commit_sha":null,"homepage":"http://codeobia.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moayadnajd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-16T16:12:06.000Z","updated_at":"2024-05-30T15:55:14.000Z","dependencies_parsed_at":"2024-06-21T15:45:24.001Z","dependency_job_id":"36f291a8-0027-4848-98d0-df461c7f4cee","html_url":"https://github.com/moayadnajd/nativescript-filter-select","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moayadnajd%2Fnativescript-filter-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moayadnajd%2Fnativescript-filter-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moayadnajd%2Fnativescript-filter-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moayadnajd%2Fnativescript-filter-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moayadnajd","download_url":"https://codeload.github.com/moayadnajd/nativescript-filter-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248557847,"owners_count":21124168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nativescript","nativescript-plugin"],"created_at":"2024-11-07T12:29:39.296Z","updated_at":"2025-04-12T11:16:38.127Z","avatar_url":"https://github.com/moayadnajd.png","language":"TypeScript","readme":"\n\n# No active maintinance please go to https://www.npmjs.com/package/@ticnat/nativescript-searchable-select \n# FilterSelect \n[![npm](https://img.shields.io/npm/v/nativescript-filter-select.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/nativescript-filter-select)\n[![npm](https://img.shields.io/npm/dt/nativescript-filter-select.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/nativescript-filter-select)\n\nA NativeScript plugin to provide an listview widget to select AND filter items.\n## Sample Screenshots\n\n#### Android and ios\n\nSample 1 |  Sample 2\n-------- | ---------\n![Sample1](http://codeobia.com/screenshots/filter-label.gif) | ![Sample2](http://codeobia.com/screenshots/ios-filter-select.gif)\n## Installation\n\n##### NativeScript 4.x\n- `tns plugin add nativescript-filter-select`\n\n## import css  \n` @import 'nativescript-filter-select/styles.css'; `\n\n*Be sure to run a new build after adding plugins to avoid any issues\n## Vanilla NativeScript\n\n \u003cspan style=\"color:red\"\u003eIMPORTANT: \u003c/span\u003e*Make sure you include `xmlns:FS=\"nativescript-filter-select\"` on the Page element*\n\n### XML\n```XML\n\u003cPage xmlns:FS=\"nativescript-filter-select\"\u003e\n   \u003cStackLayout\u003e     \n     \u003cFS:FilterSelect \n     items=\"{{ countries }}\"\n     hint=\"Please select some countries\" \n     modal_title=\"Countries\" search_param=\"name\" \n     primary_key=\"code\" \n     change=\"{{ onSelect }}\"\n     /\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n## Angular NativeScript\n### Regiter plugin in Component class\n\n```JAVASCRIPT\n\nimport { registerElement } from 'nativescript-angular/element-registry';\nimport { FilterSelect } from 'nativescript-filter-select';\nregisterElement('FilterSelect', () =\u003e FilterSelect);\n\n```\n\n### HTML\n```HTML\n    \u003cFilterSelect \n        height=\"100%\"\n        [items]=\"items\"\n        (change)=\"onitemselected($event)\"\n        hint=\"Please select some items\" \n        modal_title=\"item\" search_param=\"name\" \n        primary_key=\"id\"\u003e\n\n    \u003c/FilterSelect\u003e\n```\n\n\n\n\n## Attributes\n\n### see [demo](https://github.com/moayadnajd/nativescript-filter-select/tree/master/demo) examples for more information\n\n| Attribute |                               Description                    |Default \n| ------------- | ------------------------------------------------------- |--------\n|   render      | to render  \"tags\" or \"label\" or \"drop\"                  | string : tags \n|   multiple    | to limit the options selected to one if set to false       | boolean : true\n|search_param| index  of the string value in the items object to search on it  |string : name\n|item_template|xml template for the listview items | string : `\u003cLabel col=\"0\" text=\"{{ ${this._search_param} }}\" textWrap=\"true\" /\u003e`\n|change| change event  treger when select is done | function : optional `change(args)` and selected item can be accessed as `args.selected`\n|modal_title|title of the filter modal | String : `Please select items`\n|hint|string to show when no items selected |`Please select some items`\n|items|array of objects to populate the list of options | ObservableArray :[]\n|primary_key|unique index of the items object | string : `id`\n|selected|array of objects to mark some options as selected and it will be the result when select is done | Array: []\n|disabled| to disable select botton | boolean : false\n|allowSearch| to enable/disable search bar in the modal | boolean : true\n|refresh| to refresh the filter select with new values good with remote data | function\n|searchHint | search placeholder or hint in the items modal | \"Search for item\"\n|xbtn| remove tag text you can use tag icon here | \"x\"\n|closeText| close button text | \"Close\"\n|doneText| done button text | \"Done\"\n|clearText| clear button text | \"Clear\"\n|selectText| select button text | \"Select\"\n| autofocus | keyboard up when you open modal so you can start search | false\n| open() | open modal programmatically | function\n|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  \n\n\n### CSS core-theme styles is required for modal page if you dont have them just make your own \n\nsee [styles.css](https://github.com/moayadnajd/nativescript-filter-select/blob/master/styles.css) so you can override or make your own \n\n* and don't forget to share with us your nice styles :D\n\n### font icons \n\n* font icons are required if you are using dropdown render\n\n  and you can add fontawsome icon as a select triger ( hint=\"{{'fa-list-ul' | fonticon}}\" ) \n  \n  see [demo](https://github.com/moayadnajd/nativescript-filter-select/tree/master/demo)\n\n### For contributing \njust do a pull request with description of your changes or open issue with your ideas \n\n### i need help with [this issue](https://github.com/moayadnajd/nativescript-filter-select/issues/5)\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoayadnajd%2Fnativescript-filter-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoayadnajd%2Fnativescript-filter-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoayadnajd%2Fnativescript-filter-select/lists"}