fix(search): 预览效果优化. (#2432)

src/search/_example/base/index.js

@@ -6,13 +6,16 @@ Component({
   methods: {
     onChangeValue(e) {
       const { value } = e.detail;
-
+      const list = [
+        'tdesign-vue',
+        'tdesign-react',
+        'tdesign-miniprogram',
+        'tdesign-angular',
+        'tdesign-mobile-vue',
+        'tdesign-mobile-react',
+      ];
       this.setData({
-        resultList: value
-          ? Array.from({ length: 3 }).map((v, i) => {
-              return `预览结果：${i}`;
-            })
-          : [],
+        resultList: value ? list.filter((v) => v.includes(value)) : [],
       });
     },
   },

src/search/search.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "t-icon": "../icon/icon"
+    "t-icon": "../icon/icon",
+    "t-cell": "../cell/cell"
   }
 }

src/search/search.less

@@ -85,22 +85,8 @@
     }
   }
   &__result-item {
-    padding: 30rpx;
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-size: 34rpx;
-    color: rgba(0, 0, 0, 0.55);
-    position: relative;
-    &:not(:last-child)::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      height: 1rpx;
-      z-index: 2;
-      background-color: rgba(0, 0, 0, 0.1);
+    &--hightlight {
+      color: @brand-color;
     }
   }
 }

src/search/search.ts

@@ -23,24 +23,49 @@ export default class Search extends SuperComponent {
 
   properties = props;
 
-  observers = {};
+  observers = {
+    resultList(val) {
+      const { isSelected } = this.data;
+      if (val.length) {
+        if (isSelected) {
+          // 已选择
+          this.setData({
+            isShowResultList: false,
+            isSelected: false,
+          });
+        } else {
+          this.setData({
+            isShowResultList: true,
+          });
+        }
+      } else {
+        this.setData({
+          isShowResultList: false,
+        });
+      }
+    },
+  };
 
   data = {
     classPrefix: name,
     prefix,
+    isShowResultList: false,
+    isSelected: false,
   };
 
   onInput(e) {
     let { value } = e.detail;
     const { maxcharacter } = this.properties;
-
     if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
       const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
 
       value = characters;
     }
 
-    this.setData({ value });
+    this.setData({
+      value,
+    });
+
     this.triggerEvent('change', { value });
   }
 
@@ -70,14 +95,16 @@ export default class Search extends SuperComponent {
   onActionClick() {
     this.triggerEvent('action-click');
   }
-  
-  selectResultItem(e) {
-    const { index } = e.currentTarget.dataset
-    const item = this.properties.resultList[index]
+
+  onSelectResultItem(e) {
+    const { index } = e.currentTarget.dataset;
+    const item = this.properties.resultList[index];
     this.setData({
-      value: item
-    })
+      value: item,
+      isSelected: true,
+    });
+
     this.triggerEvent('change', { value: item });
-    this.triggerEvent('selectresult', { index, item })
+    this.triggerEvent('selectresult', { index, item });
   }
 }

src/search/search.wxml

@@ -59,12 +59,17 @@
   </view>
   <slot name="action" />
 </view>
-<view class="{{classPrefix}}__result-list" aria-role="listbox">
-  <view
+<wxs src="./search.wxs" module="this"></wxs>
+<view wx:if="{{isShowResultList && !isSelected}}" class="{{classPrefix}}__result-list" aria-role="listbox">
+  <t-cell
     wx:for="{{resultList}}"
-    wx:key="{{index}}"
+    wx:key="index"
     data-index="{{index}}"
     class="{{classPrefix}}__result-item"
-    bind:tap="selectResultItem"
-    aria-role="option">{{item}}</view>
+    hover
+    bind:tap="onSelectResultItem"
+    aria-role="option"
+  >
+    <rich-text slot="title" nodes="{{this.hightLight(item, value)}}"></rich-text>
+  </t-cell>
 </view>

src/search/search.wxs

@@ -0,0 +1,6 @@
+var hightLight = function (label, keyword) {
+  return label.replace(keyword, '<span class="t-search__result-item--hightlight">' + keyword + '</span>');
+};
+module.exports = {
+  hightLight: hightLight,
+};

src/search/type.ts

@@ -5,6 +5,10 @@
  * */
 
 export interface TdSearchProps {
+  /**
+   * 预览结果列表
+   * @default []
+   */
   resultList: {
     type: ArrayConstructor;
     value?: [];