Vue 实时检索过滤器_vue查询筛选器-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147478967

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 实时检索过滤器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
padding: 20px;
background-color: #f5f7fa;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.search-box {
width: 100%;
padding: 12px 15px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 20px;
transition: border-color 0.3s;
}
.search-box:focus {
border-color: #4776E6;
outline: none;
box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.2);
}
.item-list {
list-style: none;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
}
.item {
padding: 15px;
border-bottom: 1px solid #eee;
transition: background-color 0.2s;
}
.item:last-child {
border-bottom: none;
}
.item:hover {
background-color: #f9f9f9;
}
.item-name {
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.item-desc {
color: #666;
font-size: 14px;
}
.no-result {
padding: 20px;
text-align: center;
color: #888;
font-style: italic;
}
.website-link {
display: block;
text-align: center;
margin-top: 30px;
color: #666;
text-decoration: none;
transition: color 0.2s;
}
.website-link:hover {
color: #4776E6;
text-decoration: underline;
}
.highlight {
background-color: #fffacd;
padding: 0 2px;
border-radius: 2px;
}
</style>
</head>
<body>
<div id="app" class="container">
<h1>实时检索演示</h1>

<input
v-model="searchQuery"
class="search-box"
placeholder="输入关键字进行搜索..."
@input="highlightMatches"
>

<ul class="item-list">
<li v-if="filteredItems.length === 0" class="no-result">
没有找到匹配的结果
</li>
<li
v-for="(item, index) in filteredItems"
:key="index"
class="item"
v-html="renderItem(item)"
></li>
</ul>


</div>

<script>
// 自定义过滤器 - 高亮匹配文本
Vue.filter('highlight', function(text, query) {
if (!query) return text;
const pattern = new RegExp(`(${query})`, 'gi');
return text.replace(pattern, '<span class="highlight">$1</span>');
});

new Vue({
el: '#app',
data: {
searchQuery: '',
items: [
{ name: 'Vue.js', description: '渐进式JavaScript框架' },
{ name: 'React', description: '用于构建用户界面的JavaScript库' },
{ name: 'Angular', description: 'Google开发的Web应用框架' },
{ name: 'JavaScript', description: '轻量级的解释型编程语言' },
{ name: 'HTML5', description: '超文本标记语言的第五次重大修改' },
{ name: 'CSS3', description: '层叠样式表的最新标准' },
{ name: 'jQuery', description: '快速、简洁的JavaScript框架' },
{ name: 'Bootstrap', description: '流行的前端组件库' },
{ name: 'Webpack', description: '现代JavaScript应用程序的静态模块打包器' },
{ name: 'Node.js', description: 'JavaScript运行时环境' }
]
},
computed: {
// 使用filterBy过滤器进行实时检索
filteredItems: function() {
const query = this.searchQuery.toLowerCase();
if (!query) return this.items;

return this.items.filter(item => {
return (
item.name.toLowerCase().includes(query) ||
item.description.toLowerCase().includes(query)
);
});
}
},
methods: {
// 渲染高亮匹配的项
renderItem(item) {
const query = this.searchQuery;
const highlightedName = this.$options.filters.highlight(item.name, query);
const highlightedDesc = this.$options.filters.highlight(item.description, query);

return `
<div class="item-name">${highlightedName}</div>
<div class="item-desc">${highlightedDesc}</div>
`;
}
}
});
</script>
</body>
</html>