New Component AutoComplete

site/site.config.mjs

@@ -217,6 +217,14 @@ const docs = [
     titleEn: 'Input',
     type: 'component', // 组件文档
     children: [
+      {
+        title: 'AutoComplete 自动填充',
+        titleEn: 'AutoComplete',
+        name: 'auto-complete',
+        path: '/vue/components/auto-complete',
+        component: () => import('tdesign-vue/auto-complete/auto-complete.md'),
+        componentEn: () => import('tdesign-vue/auto-complete/auto-complete.en-US.md'),
+      },
       {
         title: 'Cascader 级联组件',
         titleEn: 'Cascader',

src/auto-complete/_example/base.vue

@@ -0,0 +1,67 @@
+<template>
+  <t-space direction="vertical" class="t-demo-auto-complete__base">
+    <t-auto-complete
+      v-model="value"
+      :options="options"
+      highlightKeyword
+      placeholder="请输入关键词搜索"
+      @change="onChange"
+    />
+
+    <t-auto-complete
+      v-model="value2"
+      :options="options"
+      placeholder="请输入关键词搜索（右侧搜索按钮可以使用插槽自定义）"
+      highlightKeyword
+      filterable
+    >
+      <template #suffix>
+        <t-button shape="square"><search-icon /></t-button>
+      </template>
+    </t-auto-complete>
+  </t-space>
+</template>
+
+<script>
+import { SearchIcon } from 'tdesign-icons-vue';
+
+export default {
+  name: 'AutoCompleteBase',
+
+  components: {
+    SearchIcon,
+  },
+
+  data() {
+    return {
+      value: '',
+      value2: '',
+      options: ['第一个默认联想词', '第二个默认联想词', '第三个默认联想词'],
+      timer: null,
+    };
+  },
+
+  methods: {
+    // 输入框内容发生变化时进行搜索，200ms 搜索一次
+    onChange(value) {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        const text = '搜索联想词';
+        const pureValue = value.replace(`第一个${text}`, '').replace(`第二个${text}`, '').replace(`第三个${text}`, '');
+
+        this.options = [`${pureValue}第一个${text}`, `${pureValue}第二个${text}`, `${pureValue}第三个${text}`];
+        clearTimeout(this.timer);
+      }, 200);
+    },
+  },
+};
+</script>
+
+<style>
+.t-demo-auto-complete__base .t-input {
+  padding-right: 0;
+}
+.t-demo-auto-complete__base .t-button svg {
+  font-size: 20px;
+}
+</style>

src/auto-complete/_example/filter.vue

@@ -0,0 +1,47 @@
+<template>
+  <t-space>
+    <!-- 组件内置的过滤规则：不区分大小写，文本任意位置匹配 -->
+    <t-auto-complete
+      v-model="value1"
+      :options="options"
+      highlightKeyword
+      filterable
+      placeholder="组件默认过滤规则（不区分大小写）"
+      style="width: 280px"
+    />
+
+    <!-- 外部自定义过滤规则：区分大小写，文本开始位置匹配 -->
+    <t-auto-complete
+      v-model="value2"
+      :options="options"
+      :filter="filterWords"
+      highlightKeyword
+      placeholder="自定义过滤规则（区分大小写）"
+      style="width: 280px"
+    />
+  </t-space>
+</template>
+
+<script>
+const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词'];
+
+export default {
+  name: 'AutoCompleteFilter',
+
+  data() {
+    return {
+      value1: '',
+      value2: '',
+      options: [...LIST],
+      timer: null,
+    };
+  },
+
+  methods: {
+    filterWords(keyword, option) {
+      const regExp = new RegExp(keyword);
+      return regExp.test(option.text);
+    },
+  },
+};
+</script>

src/auto-complete/_example/option.vue

@@ -0,0 +1,111 @@
+<template>
+  <t-space direction="vertical" class="t-demo-autocomplete-option">
+    <!-- 使用 options 自定义下拉选项 -->
+    <t-auto-complete
+      v-model="value1"
+      :options="options1"
+      :popupProps="{ overlayClassName: 't-demo-autocomplete-option-list' }"
+      placeholder="使用属性自定义联想词选项内容"
+    />
+
+    <!-- 使用插槽自定义下拉选项 -->
+    <t-auto-complete
+      v-model="value2"
+      :options="options2"
+      :popupProps="{ overlayClassName: 't-demo-autocomplete-option-list' }"
+      placeholder="使用插槽自定义联想词选项内容"
+    >
+      <template #option="{ option }">
+        <div class="custom-option">
+          <img :src="option.avatar" />
+          <div class="custom-option__main">
+            <!-- highlightKeyword -->
+            <t-highlight-option :content="option.text" :keyword="value2" />
+            <small class="description">{{ option.description }}</small>
+          </div>
+        </div>
+      </template>
+    </t-auto-complete>
+  </t-space>
+</template>
+
+<!-- lang="jsx" 重要  -->
+<script lang="jsx">
+import { HighlightOption } from 'tdesign-vue';
+
+const TEXTS = ['第一个默认联想词', '第二个默认联想词', '第三个默认联想词'];
+
+export default {
+  name: 'AutoCompleteOption',
+
+  components: {
+    THighlightOption: HighlightOption,
+  },
+
+  data() {
+    return {
+      value1: '',
+      value2: '',
+      options2: [
+        {
+          label: '第一个默认联想词',
+          description: '这是关于联想词的描述。使用插槽渲染',
+          avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+        },
+        {
+          label: '第二个默认联想词',
+          description: '这是关于联想词的描述。使用插槽渲染',
+          avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+        },
+        {
+          label: '第三个默认联想词',
+          description: '这是关于联想词的描述。使用插槽渲染',
+          avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+        },
+      ],
+      timer: null,
+    };
+  },
+
+  computed: {
+    options1() {
+      return TEXTS.map((text) => ({
+        text,
+        label: () => (
+          <div class="custom-option">
+            <img src="https://tdesign.gtimg.com/site/avatar.jpg" />
+            <div class="custom-option__main">
+              <t-highlight-option content={text} keyword={this.value1} />
+              <small class="description">这是关于联想词的描述，使用 Props 属性渲染</small>
+            </div>
+          </div>
+        ),
+      }));
+    },
+  },
+};
+</script>
+
+<style>
+.t-demo-autocomplete-option-list .t-select-option {
+  height: 50px;
+}
+
+.t-demo-autocomplete-option-list .custom-option {
+  display: flex;
+  align-items: center;
+}
+
+.t-demo-autocomplete-option-list .custom-option > img {
+  max-height: 40px;
+  border-radius: 50%;
+}
+
+.t-demo-autocomplete-option-list .custom-option__main {
+  margin-left: 8px;
+}
+
+.t-demo-autocomplete-option-list .custom-option .description {
+  color: var(--td-gray-color-9);
+}
+</style>

src/auto-complete/_example/size.vue

@@ -0,0 +1,37 @@
+<template>
+  <t-space direction="vertical">
+    <t-auto-complete
+      v-model="value1"
+      size="small"
+      :inputProps="{ label: '小尺寸：' }"
+      :options="['第一个联想词', '第二个联想词', '第三个联想词']"
+    />
+
+    <t-auto-complete
+      v-model="value2"
+      :inputProps="{ label: '中尺寸：' }"
+      :options="['第一个联想词', '第二个联想词', '第三个联想词']"
+    />
+
+    <t-auto-complete
+      v-model="value3"
+      size="large"
+      :inputProps="{ label: '大尺寸：' }"
+      :options="['第一个联想词', '第二个联想词', '第三个联想词']"
+    />
+  </t-space>
+</template>
+
+<script>
+export default {
+  name: 'AutoCompleteSize',
+
+  data() {
+    return {
+      value1: '',
+      value2: '',
+      value3: '',
+    };
+  },
+};
+</script>

src/auto-complete/_example/status.vue

@@ -0,0 +1,90 @@
+<template>
+  <t-space direction="vertical" size="32px">
+    <t-auto-complete
+      v-model="value1"
+      :options="options"
+      disabled
+      tips="这是禁用状态"
+      highlightKeyword
+      placeholder="请输入关键词搜索"
+      @change="onChange"
+    />
+    <t-auto-complete
+      v-model="value2"
+      :options="options"
+      readonly
+      tips="这是只读状态"
+      highlightKeyword
+      placeholder="请输入关键词搜索"
+      @change="onChange"
+    />
+    <t-auto-complete
+      v-model="value3"
+      :options="options"
+      tips="这是普通状态"
+      highlightKeyword
+      placeholder="请输入关键词搜索"
+      @change="onChange"
+    />
+    <t-auto-complete
+      v-model="value4"
+      :options="options"
+      tips="这是告警状态"
+      status="warning"
+      highlightKeyword
+      placeholder="请输入关键词搜索"
+      @change="onChange"
+    />
+    <t-auto-complete
+      v-model="value5"
+      :options="options"
+      tips="这是错误状态"
+      status="error"
+      highlightKeyword
+      placeholder="请输入关键词搜索"
+      @change="onChange"
+    />
+    <t-auto-complete
+      v-model="value6"
+      :options="options"
+      tips="这是成功状态"
+      status="success"
+      highlightKeyword
+      placeholder="请输入关键词搜索"
+      @change="onChange"
+    />
+  </t-space>
+</template>
+
+<script>
+export default {
+  name: 'AutoCompleteStatus',
+
+  data() {
+    return {
+      value1: '第一个默认联想词',
+      value2: '第一个默认联想词',
+      value3: '',
+      value4: '',
+      value5: '',
+      value6: '',
+      options: ['第一个默认联想词', '第二个默认联想词', '第三个默认联想词'],
+      timer: null,
+    };
+  },
+
+  methods: {
+    // 输入框内容发生变化时进行搜索，200ms 搜索一次
+    onChange(value) {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        const text = '搜索联想词';
+        const pureValue = value.replace(`第一个${text}`, '').replace(`第二个${text}`, '').replace(`第三个${text}`, '');
+
+        this.options = [`${pureValue}第一个${text}`, `${pureValue}第二个${text}`, `${pureValue}第三个${text}`];
+        clearTimeout(this.timer);
+      }, 200);
+    },
+  },
+};
+</script>