1.0.0.0723

新增本地搜索模式

README.md

@@ -36,6 +36,17 @@ QQ群: 769620939
 	tips: '请选择', //please selected
 	//空数据提示
 	empty: '暂无数据', //no data
+	//搜索延迟 ms
+	delay: 500,
+	//搜索默认提示
+	searchTips: '请选择', //please search
+	//是否开始本地搜索
+	filterable: false,
+	//本地搜索过滤方法, 返回true表示显示, false不显示, val:当前输入框搜索值, item:选项数据, index: 数组坐标, porp: 自定义属性
+	filterMethod: function(val, item, index, prop){
+		if(!val) return true;
+		return item[prop.name].indexOf(val) != -1;
+	},
 	//自定义属性名称
 	prop: {
 		name: 'name',
@@ -151,6 +162,15 @@ xmSelect: setValue(array, show)
 <h3>换一个主题</h3>
 <div id="demo13"></div>
 
+<h3>开启搜索模式</h3>
+<div id="demo14"></div>
+
+<h3>自定义搜索方法</h3>
+<div id="demo15"></div>
+
+<h3>自定义搜索延迟 和 提示</h3>
+<div id="demo16"></div>
+
 
 <script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
@@ -336,5 +356,44 @@ xmSelect: setValue(array, show)
 			color: 'red',
 		},
 	})
+	
+	var demo14 = xmSelect.render({
+		el: '#demo14', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		filterable: true, //开启搜索
+	})
+	
+	var demo15 = xmSelect.render({
+		el: '#demo15', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		filterable: true, //开启搜索
+		filterMethod: function(val, item, index, prop){
+			if(!val) return true;
+			return item[prop.name].indexOf(val) != -1;
+		},
+	})
+	
+	var demo16 = xmSelect.render({
+		el: '#demo16', 
+		data: [
+			{name: '水果', value: 1, selected: true, disabled: true},
+			{name: '蔬菜', value: 2, selected: true},
+			{name: '桌子', value: 3, disabled: true},
+			{name: '北京', value: 4},
+		],
+		filterable: true, //开启搜索
+		delay: 2000,
+		searchTips: '搜索呀 搜索呀...',
+	})
 </script>
 ```

index.html

@@ -54,6 +54,14 @@
 		<h3>换一个主题</h3>
 		<div id="demo13"></div>
 		
+		<h3>开启搜索模式</h3>
+		<div id="demo14"></div>
+		
+		<h3>自定义搜索方法</h3>
+		<div id="demo15"></div>
+		
+		<h3>自定义搜索延迟 和 提示</h3>
+		<div id="demo16"></div>
 		
 		<script src="./dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
 		<script type="text/javascript">
@@ -203,6 +211,7 @@
 						type: 'block',
 						block: {
 							showCount: 1,
+							showIcon: true,
 						}
 					}
 				}
@@ -239,6 +248,45 @@
 					color: 'red',
 				},
 			})
+			
+			var demo14 = xmSelect.render({
+				el: '#demo14', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				filterable: true, //开启搜索
+			})
+			
+			var demo15 = xmSelect.render({
+				el: '#demo15', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				filterable: true, //开启搜索
+				filterMethod: function(val, item, index, prop){
+					if(!val) return true;
+					return item[prop.name].indexOf(val) != -1;
+				},
+			})
+			
+			var demo16 = xmSelect.render({
+				el: '#demo16', 
+				data: [
+					{name: '水果', value: 1, selected: true, disabled: true},
+					{name: '蔬菜', value: 2, selected: true},
+					{name: '桌子', value: 3, disabled: true},
+					{name: '北京', value: 4},
+				],
+				filterable: true, //开启搜索
+				delay: 2000,
+				searchTips: '搜索呀 搜索呀...',
+			})
 		</script>
 		
 	</body>

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 labelProps = {  ...config, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
-		const bodyProps = {  data, prop, template, theme, sels, ck, empty }
+		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> 
+				{ 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;