feat(Search): optimize result list preview (#4380)

* feat(Search): optimize result list preview

* feat: update demo

Author: anlyyao

packages/components/search/__test__/__snapshots__/demo.test.js.snap

@@ -33,7 +33,16 @@ exports[`Search Search base demo works fine 1`] = `
   >
     <t-search
       placeholder="输入tdesign，有预览结果"
-      resultList="{{Array []}}"
+      resultList="{{
+        Array [
+          "tdesign-vue",
+          "tdesign-react",
+          "tdesign-miniprogram",
+          "tdesign-angular",
+          "tdesign-mobile-vue",
+          "tdesign-mobile-react",
+        ]
+      }}"
       bind:change="onChangeValue"
     />
   </wx-view>

packages/components/search/_example/base/index.js

@@ -1,21 +1,21 @@
+const allList = [
+  'tdesign-vue',
+  'tdesign-react',
+  'tdesign-miniprogram',
+  'tdesign-angular',
+  'tdesign-mobile-vue',
+  'tdesign-mobile-react',
+];
+
 Component({
   data: {
-    value: '',
-    resultList: [],
+    resultList: allList,
   },
   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 ? list.filter((v) => v.includes(value)) : [],
+        resultList: value ? allList.filter((v) => v.includes(value)) : allList,
       });
     },
   },

packages/components/search/search.less

@@ -101,6 +101,12 @@
     }
   }
 
+  &__result-list {
+    max-height: 560rpx;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
   &__result-list &__result-item {
     padding-left: 0;
 

packages/components/search/search.ts

@@ -26,22 +26,9 @@ export default class Search extends SuperComponent {
   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,
-        });
+      // resultList 变化且已选过某项时，重置 isSelected 状态
+      if (val.length && isSelected) {
+        this.setData({ isSelected: false });
       }
     },
     'clearTrigger, clearable, disabled, readonly'() {
@@ -52,8 +39,8 @@ export default class Search extends SuperComponent {
   data = {
     classPrefix: name,
     prefix,
-    isShowResultList: false,
     isSelected: false,
+    isSearching: false, // 是否开启搜索模式
     showClearIcon: true,
   };
 
@@ -84,6 +71,7 @@ export default class Search extends SuperComponent {
 
   onFocus(e) {
     const { value } = e.detail;
+    this.setData({ isSearching: true });
     this.updateClearIconVisible(true);
     this.triggerEvent('focus', { value });
   }
@@ -95,7 +83,7 @@ export default class Search extends SuperComponent {
   }
 
   handleClear() {
-    this.setData({ value: '' });
+    this.setData({ value: '', isSearching: false });
     this.triggerEvent('clear', { value: '' });
     this.triggerEvent('change', { value: '', trigger: 'clear' });
   }
@@ -106,6 +94,7 @@ export default class Search extends SuperComponent {
   }
 
   onActionClick() {
+    this.setData({ isSearching: false });
     this.triggerEvent('action-click');
   }
 

packages/components/search/search.wxml

@@ -62,7 +62,11 @@
   <slot wx:else name="action" />
 </view>
 
-<view wx:if="{{isShowResultList && !isSelected}}" class="{{classPrefix}}__result-list" aria-role="listbox">
+<view
+  wx:if="{{isSearching && resultList.length > 0 && !isSelected}}"
+  class="{{classPrefix}}__result-list"
+  aria-role="listbox"
+>
   <t-cell
     wx:for="{{resultList}}"
     wx:key="index"