UniApp实现搜索功能与关键字匹配的设计与开发指南

<template><view><uni-input type="text" v-model="keyword" placeholder="请输入关键字"></uni-input><uni-button type="primary">搜索</uni-button></view></template><script>export default {  data() {    return {      keyword: ''    };  },  methods: {    search() {      // 根据关键字执行搜索操作    }  }};</script>

<template><view><uni-input type="text" v-model="keyword" placeholder="请输入关键字"></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="请输入关键字"></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;">$&');    }  }};</script>