当前位置：首页 > 软件库 > 手机/移动开发 > >

nativescript-filter-select

授权协议 View license

开发语言 JavaScript TypeScript

所属分类手机/移动开发

软件类型开源软件

地区不详

投递者田阳泽

操作系统 iOS

开源组织无

适用人群未知

软件概览

No active maintinance please go to https://www.npmjs.com/package/@ticnat/nativescript-searchable-select

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

tns plugin add nativescript-filter-select

import css

@import 'nativescript-filter-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:FS="nativescript-filter-select" on the Page element

XML

<Page xmlns:FS="nativescript-filter-select">
   <StackLayout>     
     <FS:FilterSelect 
     items="{{ countries }}"
     hint="Please select some countries" 
     modal_title="Countries" search_param="name" 
     primary_key="code" 
     change="{{ onSelect }}"
     />
   </StackLayout>
</Page>

Angular NativeScript

Regiter plugin in Component class

import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from 'nativescript-filter-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
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

For contributing

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

i need help with this issue

使用案例

修改el-select 宽度数据回显搜索本表

修改el-select 宽度数据回显搜索本表修改el-select 选择框的长度 <el-col :lg="12"> <el-form-item label="所属公司" prop="companyId"> <el-select style="width:100%" v-model="form.companyId" placeholde
el-select远程搜索

//远程搜素 <el-select v-model="userName" filterable remote :remote-method="remoteMethod" :loading="loading" @change="selectChanged" clearable
el-select懒加载封装

组件代码： <template> <div class="BaseSelect"> <el-select v-option-sroll="loadmore" v-model="inputValue" filterable placeholder="请选择" ref="BaseSelect" @input.native="inputClick" value-key="id">
element el-select组件双向绑定封装与使用

 <template> <el-select :value="searchKey" filterable :filter-method="remoteMethod" :loading="loading" no-data-text="暂无数据"
native-activity 工程完全注解

http://blog.csdn.net/flash129/article/details/8506348 // android-ndk-r5b/samples/native-activity 一、native-activity/default.properties 文件内容： # This file is automatically generated by Android Tools. # 本
element二次封装el-select支持模糊搜索

el-select封装 1.首先安装pinyin-match插件 // 安装 pinyin-match npm install pinyin-match --save 2.封装组件方便后期使用 <!-- * @Descripttion: 二次封装支持模糊音搜索el-select--全局组件 * @Author: JayShen * @Date: 2021-04-21 17:09:08