1.0.0.0723

新增本地搜索模式

src/components/config/language/en.js

@@ -1,4 +1,5 @@
 export default {
 	tips: 'please selected',
 	empty: 'no data',
+	searchTips: 'please search',
 }

src/components/config/language/zn.js

@@ -1,4 +1,5 @@
 export default {
 	tips: '请选择',
 	empty: '暂无数据',
+	searchTips: '请选择',
 }

src/components/config/options.js

@@ -19,6 +19,17 @@ export default function (lan = 'zn') {
 		reset: false,
 		//用来判断多选是否显示
 		isShow: false,
+		//搜索延迟 ms
+		delay: 500,
+		//搜索默认提示
+		searchTips: setting.searchTips,
+		//是否开始本地搜索
+		filterable: false,
+		//本地搜索过滤方法
+		filterMethod: function(val, item, index, prop){
+			if(!val) return true;
+			return item[prop.name].indexOf(val) != -1;
+		},
 		//自定义属性名称
 		prop: {
 			name: 'name',

src/components/element/framework.js

@@ -57,7 +57,8 @@ class Framework extends Component{
 		
 	}
 	
-	render({ tips, theme, data, prop, template, model, empty }, { sels, show }) {
+	render(config, { sels, show }) {
+		const { tips, theme, data, prop, template, model, empty } = config;
 		const borderStyle = { borderColor: theme.color };
 		//最外层边框的属性
 		const xmSelectProps = {
@@ -93,8 +94,8 @@ class Framework extends Component{
 			}
 		};
 		
-		const labelProps = {  data, prop, model, theme, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
-		const bodyProps = {  data, prop, template, theme, sels, ck, empty }
+		const labelProps = {  ...config, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
+		const bodyProps = {  ...config, sels, ck, show }
 		//控制下拉框的显示于隐藏
 		const bodyClass = show ? 'xm-body' : 'xm-body dis';
 		

src/components/element/model/general.js

@@ -7,6 +7,8 @@ class General extends Component{
 	
 	constructor(options){
 		super(options);
+		this.searchCid = 0;
+		this.setState({ searchVal: '', });
 	}
 	
 	optionClick(item, selected, disabled, e){
@@ -15,11 +17,26 @@ class General extends Component{
 		e.stopPropagation();
 	}
 	
-	render({ data, prop, template, theme, sels, empty }) {
+	searchInputClick(e){
+		e.stopPropagation();
+	}
+	
+	searchInput(e){
+		clearTimeout(this.searchCid);
+		this.searchCid = setTimeout(() => this.setState({ searchVal: e.target.value }), this.props.delay);
+	}
+	
+	componentWillReceiveProps(props){
+		if(!props.show){
+			this.setState({ searchVal: '', })
+		}
+	}
+	
+	render({ data, prop, template, theme, sels, empty, filterable, filterMethod, delay, searchTips }) {
 		
 		const { name, value, disabled } = prop;
-		
-		const arr = data.map(item => {
+
+		const arr = (filterable ? data.filter((item, index) => filterMethod(this.state.searchVal, item, index, prop)) : data).map(item => {
 			
 			const selected = !!sels.find(sel => sel[value] == item[value])
 			const iconStyle = { color: selected ? theme.color : '' }
@@ -36,14 +53,25 @@ class General extends Component{
 			)
 		}) 
 		
-		if(!data.length){
+		if(!arr.length){
 			arr.push(
 				<div class="xm-select-empty">{ empty }</div>
 			)
 		}
 		
+		const searchClass = ['xm-search', filterable ? '':'dis'].join(' ');
+		const search = (
+			<div class={ searchClass }>
+				<i class="xm-iconfont xm-icon-sousuo"></i>
+				<input type="text" class="xm-input xm-search-input" placeholder={ searchTips } value={ this.state.searchVal } onInput={ this.searchInput.bind(this) } onClick={ this.searchInputClick.bind(this) } />
+			</div>
+		);
+		
 		return (
-			<div> { arr } </div>
+			<div> 
+				{ search }
+				<div>{ arr }</div>
+			</div>
 		)
 	}
 }

src/style/index.less

@@ -200,8 +200,41 @@ xm-select{
 				color: @disabledColor !important;
 			}
 		}
+		
+		.xm-search{
+			background-color: #FFF !important;
+			position: relative;
+			padding: 0 10px;
+			cursor: pointer;
+			
+			&>i{
+				position: absolute;
+			}
+			
+			&-input{
+				border: none;
+				border-bottom: 1px solid #E6E6E6;
+				padding-left: 27px;
+				cursor: text;
+			}
+		}
 	}
 	
+	.xm-input{
+		cursor: pointer;
+		border-radius: 2px;
+		border-width: 1px;
+		border-style: solid;
+		border-color: #E6E6E6;
+		display: block;
+		width: 100%;
+		box-sizing: border-box;
+		background-color: #FFF;
+		height: 36px;
+		line-height: 1.3;
+		padding-left: 10px;
+		outline: 0;
+	}
 	
 	.dis{
 		display: none;