搜索增加延迟搜索

src/common/components/SearchOption/index.jsx

@@ -3,6 +3,7 @@ import styles from './index.less';
 import clear from './imgs/clear.png';
 import search from './imgs/search.png';
 import PropTypes from "prop-types";
+import config from '@config/index';
 /**
  * 前提条件父元素有定位
  * visible  搜索显示隐藏
@@ -14,7 +15,8 @@ class SearchOption extends React.Component {
         this.state = {
             val:'',
             border:'',
-            show:false
+            show:false,
+            timer:null
         }
         this.textInput = React.createRef();
         this.handleClearVal = this.handleClearVal.bind(this);
@@ -50,20 +52,24 @@ class SearchOption extends React.Component {
     }
     handleInput(e){
       const { handleChangeValue } = this.props;
-      if((e.target.value).trim() != ''){
-          handleChangeValue(e.target.value);
-          this.setState({
-              val:e.target.value,
-              show:true
-          })
-      }else{
-          // this.handleClearVal('')            //这个要放开，输入为空清除列表ie8会有问题
-          handleChangeValue('');
-          this.setState({
-              show:false
-          })
-          return;
-      }
+        clearTimeout(this.state.timer);
+        let timer = setTimeout(()=>{
+            clearTimeout(this.state.timer);
+            if(e.target.value.trim() == ''){
+                this.setState({
+                    show:false
+                })
+                return  handleChangeValue('');
+            }
+            this.setState({
+                val:e.target.value,
+                show:true
+            })
+            handleChangeValue(e.target.value);
+        },config.delayTime);
+        this.setState({
+            timer
+        });
     }
     handleFocus(){
       if(this.state.val.trim() != ''){