검색 기능 및 키워드 매칭 구현을 위한 UniApp 설계 및 개발 가이드

<template>
  <view>
    <uni-input type="text" v-model="keyword" placeholder="请输入关键字"></uni-input>
    <uni-button type="primary" @click="search">搜索</uni-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    };
  },
  methods: {
    search() {
      // 根据关键字执行搜索操作
    }
  }
};
</script>

<template>
  <view>
    <uni-input type="text" v-model="keyword" placeholder="请输入关键字" @input="search"></uni-input>
    <view v-for="item in searchResult" :key="item.id">{{ item.name }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    };
  },
  methods: {
    search() {
      // 根据关键字执行搜索操作，并更新搜索结果
      // 示例中使用setTimeout模拟异步搜索过程
      setTimeout(() => {
        // 假设搜索结果是一个数组
        this.searchResult = [
          { id: 1, name: 'Apple' },
          { id: 2, name: 'Banana' },
          { id: 3, name: 'Orange' }
        ];
      }, 500);
    }
  }
};
</script>

<template>
  <view>
    <uni-input type="text" v-model="keyword" placeholder="请输入关键字" @input="search"></uni-input>
    <view v-for="item in searchResult" :key="item.id">
      {{ highlightKeyword(item.name) }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    };
  },
  methods: {
    search() {
      // 根据关键字执行搜索操作，并更新搜索结果
      // 示例中使用setTimeout模拟异步搜索过程
      setTimeout(() => {
        // 假设搜索结果是一个数组
        this.searchResult = [
          { id: 1, name: 'Apple' },
          { id: 2, name: 'Banana' },
          { id: 3, name: 'Orange' }
        ];
      }, 500);
    },
    highlightKeyword(text) {
      // 使用正则表达式匹配关键字，并高亮显示
      return text.replace(new RegExp(this.keyword, 'gi'), '<span style="color: red;">$&</span>');
    }
  }
};
</script>