v1.0.2

1. [修改]搜索时输入中文延迟后才进行回显
2. [修改]远程搜索时, loading状态也能进行输入的问题
3. [修改]单选模式下, 前面的图标变成圆形
4. [修改]修正Windows下的一些样式错乱, 兼容IE10以上
5. [修改]启动分页, 当搜索时, 如果搜索总页码为0, 再次搜索有页码时, 当前页面为0的问题
6. [修改]当底部空间不足时, 再次判断顶部空间是否充足, 优化展开方向

README.md

@@ -5,11 +5,11 @@
 
 前身`formSelectes`, 移除了对`jquery`的依赖, 提高渲染速度
 
-[演示站点](https://maplemei.gitee.io/xm-select/)
+[xm-select演示站点](https://maplemei.gitee.io/xm-select/)
 
 > 历史版本
 
-[formSelectes](https://github.com/hnzzmsf/layui-formSelects)
+[前往formSelectes](https://github.com/hnzzmsf/layui-formSelects)
 
 > 联系方式 
 

docs/changelog.md

@@ -1,3 +1,26 @@
+# 2019-09-23
+
+`v1.0.2`
+
+1. [修改]搜索时输入中文延迟后才进行回显
+2. [修改]远程搜索时, loading状态也能进行输入的问题
+3. [修改]单选模式下, 前面的图标变成圆形
+4. [修改]修正Windows下的一些样式错乱, 兼容IE10以上
+5. [修改]启动分页, 当搜索时, 如果搜索总页码为0, 再次搜索有页码时, 当前页面为0的问题
+6. [修改]当底部空间不足时, 再次判断顶部空间是否充足, 优化展开方向
+
+
+# 2019-09-22
+
+`v1.0.1`
+
+1. [新增]物理分页配置
+2. [新增]自定义搜索模式(远程搜索)
+3. [新增]下拉选高度配置
+4. [修改]调整布局为flex布局
+5. [修改]展开下拉选时, 自动聚焦搜索框
+
+
 # 2019-09-16
 
 `v1.0.0`

docs/data.js

@@ -33,7 +33,17 @@ xmSelect.render({
 <p>如果有bug欢迎提issues, 或者在群内@群主进行反馈</p>
 
 <h3>更新日志</h3>
-`, js: ``, comment: `,
+`, js: ``, comment: `
+
+[2019-09-23] v1.0.2
+1. [修改]搜索时输入中文延迟后才进行回显
+2. [修改]远程搜索时, loading状态也能进行输入的问题
+3. [修改]单选模式下, 前面的图标变成圆形
+4. [修改]修正Windows下的一些样式错乱, 兼容IE10以上
+5. [修改]启动分页, 当搜索时, 如果搜索总页码为0, 再次搜索有页码时, 当前页面为0的问题
+6. [修改]当底部空间不足时, 再次判断顶部空间是否充足, 优化展开方向
+
+
 [2019-09-22] v1.0.1
 1. [新增]物理分页配置
 2. [新增]自定义搜索模式(远程搜索)

src/components/element/framework.js

@@ -77,7 +77,7 @@ class Framework extends Component{
 				let clientHeight = document.documentElement.clientHeight;
 				let rect = this.base.getBoundingClientRect();
 				let diff = clientHeight - (rect.y || rect.top) - rect.height - 20;
-				direction = diff > bodyViewHeight || (rect.y || rect.top) < bodyViewHeight ? 'down' : 'up';
+				direction = diff > bodyViewHeight || (rect.y || rect.top) < diff ? 'down' : 'up';
 			}
 			this.setState({ directionVal: direction })
 		}else{

src/components/element/model/general.js

@@ -9,7 +9,8 @@ class General extends Component{
 		super(options);
 		this.searchCid = 0;
 		this.setState({ 
-			searchVal: '',
+			searchValue: '',
+			filterValue: '',
 			remote: true,
 			loading: false,
 			pageIndex: 1,
@@ -17,6 +18,7 @@ class General extends Component{
 			
 			inputOver: true,
 		});
+		
 	}
 	
 	optionClick(item, selected, disabled, e){
@@ -53,12 +55,17 @@ class General extends Component{
 	searchInput(e){
 		
 		let v = e.target.value;
+		console.log(v, this.state.searchValue)
 		
 		setTimeout(() => {
 			if(this.state.inputOver){
+				//保证输入框内的值是实时的
+				this.setState({ searchValue: v });
+				
+				//让搜索变成异步的
 				clearTimeout(this.searchCid);
 				this.searchCid = setTimeout(() => this.setState({ 
-					searchVal: v,
+					filterValue: this.state.searchValue,
 					remote: true,
 				}), this.props.delay);
 			}
@@ -66,7 +73,11 @@ class General extends Component{
 	}
 	
 	focus(){
-		this.searchInputRef.focus();
+		this.searchInputRef && this.searchInputRef.focus();
+	}
+	
+	blur(){
+		this.searchInputRef && this.searchInputRef.blur();
 	}
 	
 	handleComposition(e){
@@ -83,7 +94,7 @@ class General extends Component{
 		if(this.props.show != props.show){
 			if(!props.show){
 				//清空输入框的值
-				this.setState({ searchVal: '' });
+				this.setState({ searchValue: '', filterValue: '' });
 			}else{
 				//聚焦输入框
 				setTimeout(() => this.focus(), 0);
@@ -93,7 +104,7 @@ class General extends Component{
 	
 	render(config) {
 	
-		let { data, prop, template, theme, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips } = config
+		let { data, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips } = config
 		
 		const { name, value, disabled } = prop;
 		
@@ -103,13 +114,18 @@ class General extends Component{
 			if(remoteSearch){//是否进行远程搜索
 				if(this.state.remote){
 					this.setState({ loading: true, remote: false });
-					remoteMethod(this.state.searchVal, result => {
+					//让输入框失去焦点
+					this.blur();
+					remoteMethod(this.state.filterValue, result => {
+						//回调后可以重新聚焦
+						this.focus();
+						
 						this.setState({ loading: false });
 						this.props.onReset(result);
 					});
 				}
 			}else{
-				arr = data.filter((item, index) => filterMethod(this.state.searchVal, item, index, prop));
+				arr = data.filter((item, index) => filterMethod(this.state.filterValue, item, index, prop));
 			}
 		}
 		
@@ -117,9 +133,8 @@ class General extends Component{
 		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 } 
+				<input type="text" class="xm-input xm-search-input" placeholder={ searchTips } value={ this.state.searchValue } 
 					ref={ (input) => { this.searchInputRef = input; } }
-					autoFocus
 					onClick={ this.blockClick.bind(this) } 
 					onInput={ this.searchInput.bind(this) } 
 					onCompositionStart={ this.handleComposition.bind(this) }
@@ -142,6 +157,11 @@ class General extends Component{
 				this.changePageIndex(size);
 			}
 			
+			//如有总页码>1, 但是因为搜索造成的页码=0的情况
+			if(size > 0 && this.state.pageIndex <= 0){
+				this.changePageIndex(1);
+			}
+			
 			//实现简单的物理分页
 			let start = (this.state.pageIndex - 1) * config.pageSize;
 			let end = start + config.pageSize;
@@ -191,10 +211,11 @@ class General extends Component{
 				borderColor: theme.color,
 			};
 			const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' ');
+			const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' ');
 			
 			return (
 				<div class={className} value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
-					<i class="xm-option-icon xm-iconfont xm-icon-duox" style={ iconStyle }></i>
+					<i class={ iconClass } style={ iconStyle }></i>
 					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
 				</div>
 			)

src/index.ejs

@@ -23,12 +23,13 @@
 				// 渲染的数据
 				data: ''.padEnd(11, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
 				filterable: true,
-				remoteSearch: true,
+				radio: true,
-				remoteMethod: function(val, cb){
+				// remoteSearch: true,
-					setTimeout(() =>  {
+				// remoteMethod: function(val, cb){
-						cb([{name: 'xxx' + val, value: 1}])
+				// 	setTimeout(() =>  {
-					}, 2000);
+				// 		cb([{name: 'xxx' + val, value: 1}])
-				},
+				// 	}, 2000);
+				// },
 				paging: true,
 			})
 			demo1.opened()

src/style/index.less

@@ -124,6 +124,7 @@ xm-select{
 			line-height: 26px;
 			border-radius: 3px;
 			align-items: baseline;
+			color: #FFF;
 			
 			& > span{
 				display: flex;
@@ -192,6 +193,9 @@ xm-select{
 				justify-content: center;
 				align-items: center;
 			}
+			&-icon.xm-icon-danx{
+				border-radius: 100%;
+			}
 			
 			&-content{
 				display: flex;