VUE中el-autocomplete候选词高亮

最新推荐文章于 2024-10-31 10:32:58 发布

登楼痕

最新推荐文章于 2024-10-31 10:32:58 发布

阅读量1.5k

点赞数 1

分类专栏：前端开发文章标签： vue elementui

本文链接：https://blog.csdn.net/denglouhen/article/details/110233792

版权

本文介绍了在Vue项目中使用ElementUI的el-autocomplete组件，如何实现搜索候选词的高亮显示。通过关键代码展示，展示了在输入框中输入时，匹配关键字并高亮显示的技术实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键代码：

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
> <template slot-scope="{ item }">
    <div class="autocomplete-choose-name" v-html="htmlValue(item.value)"></div>
  </template></el-autocomplete>

<script>
  export default {
    data() {
      return {
        restaurants: [],
        state: '',
        timeout:  null
      };
    },
created() {
    this.restaurants = this.loadAll();
  },
methods:{
  htmlValue(val) {
  let key = this.state;
  if (key.length > 0) {
    return val.replace(
    new RegExp(key, "g"),
    "<span style='color:red;'>" + key + "</span>"
    );
  }
  return val;
  },
     loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          { "value": "泷千家(天山西路店)", "address":

最低0.47元/天解锁文章