所属分类:web前端开发
UniApp实现搜索功能与关键字匹配的设计与开发指南
2.1 输入框与搜索按钮
首先,需要在页面中设计一个输入框和一个搜索按钮,用于用户输入搜索关键字和触发搜索操作。UniApp提供了uni-input和uni-button组件,可以方便地添加输入框和按钮。
示例代码:
<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>
2.2 实时搜索
为了提供更好的交互体验,可以在用户输入关键字的同时实时进行搜索匹配。可以使用uni-input组件的@input
事件来监听输入框的输入变化,并在事件处理函数内执行搜索操作。搜索结果可以使用一个列表来展示,通过响应式数据动态更新列表内容。
示例代码:
<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>
2.3 关键字匹配
在搜索过程中,还可以实现关键字匹配的功能,即根据用户输入的关键字,在搜索结果中高亮显示匹配的关键字。可以使用正则表达式来实现关键字的匹配和高亮。
示例代码:
<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>