diff --git a/src/search/_example/base/index.js b/src/search/_example/base/index.js index 621e91131..3e47aac0f 100644 --- a/src/search/_example/base/index.js +++ b/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)) : [], }); }, }, diff --git a/src/search/search.json b/src/search/search.json index 049940c16..5a7c1a361 100644 --- a/src/search/search.json +++ b/src/search/search.json @@ -1,6 +1,7 @@ { "component": true, "usingComponents": { - "t-icon": "../icon/icon" + "t-icon": "../icon/icon", + "t-cell": "../cell/cell" } } diff --git a/src/search/search.less b/src/search/search.less index dea119fd7..4de5fc08f 100644 --- a/src/search/search.less +++ b/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; } } } diff --git a/src/search/search.ts b/src/search/search.ts index 11e3df38a..fe82fca93 100644 --- a/src/search/search.ts +++ b/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 }); } } diff --git a/src/search/search.wxml b/src/search/search.wxml index 593e62592..99ebb886a 100644 --- a/src/search/search.wxml +++ b/src/search/search.wxml @@ -59,12 +59,17 @@ - - + + {{item}} + hover + bind:tap="onSelectResultItem" + aria-role="option" + > + + diff --git a/src/search/search.wxs b/src/search/search.wxs new file mode 100644 index 000000000..ebb8266ee --- /dev/null +++ b/src/search/search.wxs @@ -0,0 +1,6 @@ +var hightLight = function (label, keyword) { + return label.replace(keyword, '' + keyword + ''); +}; +module.exports = { + hightLight: hightLight, +}; diff --git a/src/search/type.ts b/src/search/type.ts index b3ebad779..884290c0e 100644 --- a/src/search/type.ts +++ b/src/search/type.ts @@ -5,6 +5,10 @@ * */ export interface TdSearchProps { + /** + * 预览结果列表 + * @default [] + */ resultList: { type: ArrayConstructor; value?: [];