feat(search): 新增自动完成项预览列表. (Tencent#2432)

fix Tencent#2432

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"

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>

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>
 `;

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}`;
+            })
+          : [],
+      });
+    },
   },
 });

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>

src/search/_example/base/index.wxss

@@ -2,3 +2,7 @@
   background-color: #fff;
   padding: 16rpx 32rpx;
 }
+
+.example-search:not(:last-child) {
+  margin-bottom: 32rpx;
+}

src/search/props.ts

@@ -6,6 +6,11 @@
 
 import { TdSearchProps } from './type';
 const props: TdSearchProps = {
+  /** 预览结果列表 */
+  resultList: {
+    type: Array,
+    value: [],
+  },
   /** 自定义右侧操作按钮文字 */
   action: {
     type: String,

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);
+    }
+  }
 }

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 })
+  }
 }

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>

src/search/type.ts

@@ -5,6 +5,10 @@
  * */
 
 export interface TdSearchProps {
+  resultList: {
+    type: ArrayConstructor;
+    value?: [];
+  };
   /**
    * 自定义组件样式
    * @default ''