From 01519773f5ebbf901f58e4fc161bf8f4f865a2c0 Mon Sep 17 00:00:00 2001
From: byqbai <byq1213@qq.com>
Date: Wed, 27 Dec 2023 10:53:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(search):=20=E6=96=B0=E5=A2=9E=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=AE=8C=E6=88=90=E9=A1=B9=E9=A2=84=E8=A7=88=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8.=20(#2432)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #2432
---
 .../__test__/__snapshots__/index.test.js.snap |  4 ++--
 .../__test__/__snapshots__/demo.test.js.snap  | 10 +++++++++-
 .../__test__/__snapshots__/index.test.js.snap |  3 +++
 src/search/_example/base/index.js             | 14 ++++++++++++++
 src/search/_example/base/index.wxml           |  6 +++++-
 src/search/_example/base/index.wxss           |  4 ++++
 src/search/props.ts                           |  5 +++++
 src/search/search.less                        | 19 +++++++++++++++++++
 src/search/search.ts                          | 11 +++++++++++
 src/search/search.wxml                        |  9 +++++++++
 src/search/type.ts                            |  4 ++++
 11 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index ec94925df..166658e43 100644
--- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -91,7 +91,7 @@ exports[`dropdown-menu :base 1`] = `
             bind:visible-change="handleMaskClick"
           >
             <wx-view
-              class="t-popup t-popup--top t-fade-enter-active t-fade-enter-to class t-class"
+              class="t-popup t-popup--top t-fade-enter t-fade-enter-active class t-class"
               style="z-index:11601; position: absolute;"
               bind:transitionend="onTransitionEnd"
             >
@@ -626,7 +626,7 @@ exports[`dropdown-menu :base 1`] = `
               <wx-view
                 ariaLabel="关闭"
                 ariaRole="button"
-                class="t-overlay t-fade-enter-active t-fade-enter-to class"
+                class="t-overlay t-fade-enter t-fade-enter-active class"
                 style="--td-overlay-transition-duration:300ms; z-index:11000; position: absolute;"
                 bind:tap="handleClick"
                 catch:touchmove="noop"
diff --git a/src/search/__test__/__snapshots__/demo.test.js.snap b/src/search/__test__/__snapshots__/demo.test.js.snap
index 0c1a7062c..26595e5fe 100644
--- a/src/search/__test__/__snapshots__/demo.test.js.snap
+++ b/src/search/__test__/__snapshots__/demo.test.js.snap
@@ -26,7 +26,15 @@ exports[`Search Search base demo works fine 1`] = `
   >
     <t-search
       placeholder="搜索预设文案"
-      value=""
+    />
+  </wx-view>
+  <wx-view
+    class="example-search"
+  >
+    <t-search
+      placeholder="搜索预设文案，输入有预览结果"
+      resultList="{{Array []}}"
+      bind:change="onChangeValue"
     />
   </wx-view>
 </base>
diff --git a/src/search/__test__/__snapshots__/index.test.js.snap b/src/search/__test__/__snapshots__/index.test.js.snap
index 01d0fd3cc..110cde4eb 100644
--- a/src/search/__test__/__snapshots__/index.test.js.snap
+++ b/src/search/__test__/__snapshots__/index.test.js.snap
@@ -64,6 +64,9 @@ exports[`search Props :base 1`] = `
   
       </wx-view>
     </wx-view>
+    <wx-view
+      class="t-search__result-list"
+    />
   </t-search>
 </main>
 `;
diff --git a/src/search/_example/base/index.js b/src/search/_example/base/index.js
index d6ebd8e2d..621e91131 100644
--- a/src/search/_example/base/index.js
+++ b/src/search/_example/base/index.js
@@ -1,5 +1,19 @@
 Component({
   data: {
     value: '',
+    resultList: [],
+  },
+  methods: {
+    onChangeValue(e) {
+      const { value } = e.detail;
+
+      this.setData({
+        resultList: value
+          ? Array.from({ length: 3 }).map((v, i) => {
+              return `预览结果：${i}`;
+            })
+          : [],
+      });
+    },
   },
 });
diff --git a/src/search/_example/base/index.wxml b/src/search/_example/base/index.wxml
index 5ec180077..e3e61c42c 100644
--- a/src/search/_example/base/index.wxml
+++ b/src/search/_example/base/index.wxml
@@ -1,3 +1,7 @@
 <view class="example-search">
-  <t-search model:value="{{value}}" placeholder="搜索预设文案" />
+  <t-search placeholder="搜索预设文案" />
+</view>
+
+<view class="example-search">
+  <t-search placeholder="搜索预设文案，输入有预览结果" resultList="{{resultList}}" bind:change="onChangeValue" />
 </view>
diff --git a/src/search/_example/base/index.wxss b/src/search/_example/base/index.wxss
index a5f17d78a..408ab45a6 100644
--- a/src/search/_example/base/index.wxss
+++ b/src/search/_example/base/index.wxss
@@ -2,3 +2,7 @@
   background-color: #fff;
   padding: 16rpx 32rpx;
 }
+
+.example-search:not(:last-child) {
+  margin-bottom: 32rpx;
+}
\ No newline at end of file
diff --git a/src/search/props.ts b/src/search/props.ts
index 436ba7e7c..4202767bb 100644
--- a/src/search/props.ts
+++ b/src/search/props.ts
@@ -6,6 +6,11 @@
 
 import { TdSearchProps } from './type';
 const props: TdSearchProps = {
+  /** 预览结果列表 */
+  resultList: {
+    type: Array,
+    value: [],
+  },
   /** 自定义右侧操作按钮文字 */
   action: {
     type: String,
diff --git a/src/search/search.less b/src/search/search.less
index 2e2fb01b3..dea119fd7 100644
--- a/src/search/search.less
+++ b/src/search/search.less
@@ -84,4 +84,23 @@
       text-align: center;
     }
   }
+  &__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);
+    }
+  }
 }
diff --git a/src/search/search.ts b/src/search/search.ts
index 87bebfb11..11e3df38a 100644
--- a/src/search/search.ts
+++ b/src/search/search.ts
@@ -59,6 +59,7 @@ export default class Search extends SuperComponent {
   handleClear() {
     this.setData({ value: '' });
     this.triggerEvent('clear', { value: '' });
+    this.triggerEvent('change', { value: '' });
   }
 
   onConfirm(e) {
@@ -69,4 +70,14 @@ export default class Search extends SuperComponent {
   onActionClick() {
     this.triggerEvent('action-click');
   }
+  
+  selectResultItem(e) {
+    const { index } = e.currentTarget.dataset
+    const item = this.properties.resultList[index]
+    this.setData({
+      value: item
+    })
+    this.triggerEvent('change', { value: item });
+    this.triggerEvent('selectresult', { index, item })
+  }
 }
diff --git a/src/search/search.wxml b/src/search/search.wxml
index 667d0d771..593e62592 100644
--- a/src/search/search.wxml
+++ b/src/search/search.wxml
@@ -59,3 +59,12 @@
   </view>
   <slot name="action" />
 </view>
+<view class="{{classPrefix}}__result-list" aria-role="listbox">
+  <view
+    wx:for="{{resultList}}"
+    wx:key="{{index}}"
+    data-index="{{index}}"
+    class="{{classPrefix}}__result-item"
+    bind:tap="selectResultItem"
+    aria-role="option">{{item}}</view>
+</view>
diff --git a/src/search/type.ts b/src/search/type.ts
index 0ce847c52..b3ebad779 100644
--- a/src/search/type.ts
+++ b/src/search/type.ts
@@ -5,6 +5,10 @@
  * */
 
 export interface TdSearchProps {
+  resultList: {
+    type: ArrayConstructor;
+    value?: [];
+  };
   /**
    * 自定义组件样式
    * @default ''