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?: [];