vue搜索框的实现
Vue 搜索框的实现方法
基础实现（双向绑定 + 过滤）
通过 v-model 实现数据双向绑定，结合计算属性或方法过滤数据：
<template>
<div>
<input v-model="searchQuery" placeholder="搜索..." />
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>防抖优化版本
添加防抖函数避免频繁触发搜索：
<template>
<div>
<input
v-model="searchQuery"
@input="onSearchInput"
placeholder="搜索..."
/>
<!-- 结果列表 -->
</div>
</template>
<script>
import { debounce } from 'lodash'
export default {
data() {
return {
searchQuery: '',
items: [],
allItems: [] // 原始数据
}
},
methods: {
onSearchInput: debounce(function() {
this.filterItems()
}, 300),
filterItems() {
this.items = this.allItems.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
},
created() {
// 初始化获取所有数据
this.allItems = [...this.items]
}
}
</script>服务端搜索实现
当数据量较大时，建议使用服务端搜索：
<template>
<div>
<input
v-model="searchQuery"
@input="fetchSearchResults"
placeholder="搜索..."
/>
<ul>
<li v-for="result in searchResults" :key="result.id">
{{ result.title }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
searchQuery: '',
searchResults: [],
cancelToken: null
}
},
methods: {
fetchSearchResults() {
if (this.cancelToken) {
this.cancelToken.cancel('取消之前的请求')
}
this.cancelToken = axios.CancelToken.source()
axios.get('/api/search', {
params: { q: this.searchQuery },
cancelToken: this.cancelToken.token
}).then(response => {
this.searchResults = response.data
}).catch(error => {
if (!axios.isCancel(error)) {
console.error('搜索出错:', error)
}
})
}
}
}
</script>高级功能扩展
- 搜索建议：监听输入时显示建议列表
- 历史记录：使用 localStorage 存储搜索历史
- 高亮匹配：使用正则表达式高亮显示匹配文本
- 多条件搜索：添加多个搜索字段的复合查询
样式优化建议
.search-container {
position: relative;
}
.search-input {
padding: 8px 15px;
width: 300px;
border: 1px solid #ddd;
border-radius: 4px;
}
.search-results {
position: absolute;
width: 100%;
max-height: 300px;
overflow-y: auto;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
