知识搜索滚动条添加

src/components/MedicalInfo/index.jsx

@@ -15,6 +15,7 @@ class MedicalInfo extends Component {
         this.handleChange = this.handleChange.bind(this);
         this.clear = this.clear.bind(this);
         this.getSearchList = this.getSearchList.bind(this);
+        this.handleEnter = this.handleEnter.bind(this);
     }
     getSearchList() {
         const { getAllConceptDetail,searchResult } = this.props;
@@ -37,6 +38,11 @@ class MedicalInfo extends Component {
         val:this.$inp.current.value
       });
   }
+  handleEnter(e){
+      if(e.keyCode==13){
+        this.search();
+      }
+  }
   clear(){
     this.$inp.current.value = '';
     this.setState({
@@ -57,14 +63,15 @@ class MedicalInfo extends Component {
         const {searchResult} = this.props;
         const {val} = this.state;
         return (
-        <div className={style['mefical-info-wrapper']} ref={this.$cont}>
-            <div className={style['search-cont']}>
+            <div className={style['search-cont']} ref={this.$cont}>
+              <div className={style['search-box']}>
                 <p className={style['title']}>医学知识搜索</p>
                 <p className={style['cont']}>
-                  <input type="text" className={style['input']} ref={this.$inp} onInput={this.handleChange}/>
+                  <input type="text" className={style['input']} ref={this.$inp} onInput={this.handleChange} onKeyUp={this.handleEnter}/>
                   {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
                   <button onClick={this.search}>搜索</button>
                 </p>
+              </div>
               {searchResult&&searchResult.length>0?<div className={style['result']}>
                     <p className={style['title']}>查询内容</p>
                     <ul>
@@ -72,8 +79,8 @@ class MedicalInfo extends Component {
                     </ul>
               </div>:<p className={style['no-data']}>暂无搜索结果！</p>}
              </div>
-        </div>
-        
+
+
         )
 
         

src/components/MedicalInfo/index.less

@@ -7,6 +7,17 @@
     position: relative;
 }
 .search-cont{
+    padding: 0px 15px;
+    line-height: 20px;
+    position: relative;
+    overflow: hidden;
+    .search-box{
+        position: fixed;
+        z-index: 9;
+        background: #fff;
+        width: 430px;
+        padding: 0 0 15px;
+    }
     .cont{
         position: relative;
         img{
@@ -37,12 +48,14 @@
         line-height: 34px;
         color: #fff;
         background: #2A9BD5;
-        border:1px #2A9BD5 solid;
         text-align: center;
         border: none;
     }
     .result{
-        margin-top: 15px;
+        padding: 78px 5px 0 0;
+        height: 100%;
+        overflow: auto;
+        box-sizing: border-box;
         li{
             border-bottom:1px #CECECE solid;
             line-height: 42px;
@@ -75,5 +88,6 @@
         color:#979797;
         text-align: center;
         line-height: 40px;
+        margin-top: 66px;
     }
 }

src/components/ScaleSearch/index.jsx

@@ -14,6 +14,7 @@ class ScaleSearch extends Component {
     this.search = this.search.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.clear = this.clear.bind(this);
+    this.handleEnter = this.handleEnter.bind(this);
   }
   getResult(id){
     const {formulaResult} = this.props;
@@ -51,6 +52,11 @@ class ScaleSearch extends Component {
       val:this.$inp.current.value
     });
   }
+  handleEnter(e){
+    if(e.keyCode==13){
+      this.search();
+    }
+  }
   clear(){
     this.$inp.current.value = '';
     this.setState({
@@ -71,14 +77,15 @@ class ScaleSearch extends Component {
     const {searchResult} = this.props;
     const {val} = this.state;
     return (
-      <div className={style['mefical-info-wrapper']} ref={this.$cont}>
-        <div className={style['search-cont']}>
-          <p className={style['title']}>量表搜索</p>
-          <p className={style['cont']}>
-            <input type="text" className={style['input']} ref={this.$inp} onInput={this.handleChange}/>
-            {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
-            <button onClick={this.search}>搜索</button>
-          </p>
+        <div className={style['search-cont']} ref={this.$cont}>
+          <div className={style['search-box']}>
+            <p className={style['title']}>量表搜索</p>
+            <p className={style['cont']}>
+              <input type="text" className={style['input']} ref={this.$inp} onInput={this.handleChange} onKeyUp={this.handleEnter}/>
+              {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
+              <button onClick={this.search}>搜索</button>
+            </p>
+          </div>
           {searchResult&&searchResult.length>0?<div className={style['result']}>
             <p className={style['title']}>查询内容</p>
             <ul>
@@ -86,8 +93,6 @@ class ScaleSearch extends Component {
             </ul>
           </div>:<p className={style['no-data']}>暂无搜索结果！</p>}
         </div>
-      </div>
-
     )
 
 

src/components/ScaleSearch/index.less

@@ -7,6 +7,17 @@
   position: relative;
 }
 .search-cont{
+  padding: 0px 15px;
+  line-height: 20px;
+  position: relative;
+  overflow: hidden;
+  .search-box{
+    position: fixed;
+    z-index: 9;
+    background: #fff;
+    width: 430px;
+    padding: 0 0 15px;
+  }
   .cont{
     position: relative;
     img{
@@ -37,12 +48,14 @@
     line-height: 34px;
     color: #fff;
     background: #2A9BD5;
-    border:1px #2A9BD5 solid;
     text-align: center;
     border: none;
   }
   .result{
-    margin-top: 15px;
+    padding: 78px 5px 0 0;
+    height: 100%;
+    overflow: auto;
+    box-sizing: border-box;
     li{
       border-bottom:1px #CECECE solid;
       line-height: 42px;
@@ -80,5 +93,6 @@
     color:#979797;
     text-align: center;
     line-height: 40px;
+    margin-top: 66px;
   }
 }