javascript - 如何使用 Vue+html 突出显示搜索查询
问题描述
在这里我的搜索正在工作,但我是一个新手,不知道如何使用 npm...我正在使用带有 VueJS 的 HTML 来实现这一点,并成功创建了搜索过滤器,但无法实现高亮过滤器..一些潜在客户是使用的 markjs.io 和其他一些自定义 vuejs 过滤器,但无法实现它们。
class Post {
constructor(title, link, author, img, course, coursel, cours, coursl, cour, courl, cou, coul, co, col) {
this.title = title;
this.link = link;
this.author = author;
this.img = img;
this.course = course;
this.coursel = coursel;
this.cours = cours;
this.coursl = coursl;
this.cour = cour;
this.courl = courl;
this.cou = cou;
this.coul = coul;
this.co = co;
this.col = col;
}
}
const app = new Vue({
el: "#app",
data: {
search: "",
postList: [
new Post("abc", null, "xyz", "wqw", "qwe", "", " ", null, " ", null, " ", null, " ", null, );
]
},
computed: {
filteredList() {
return this.postList.filter(post => {
return post.title.toLowerCase().includes(this.search.toLowerCase()) ||
post.author.toLowerCase().includes(this.search.toLowerCase()) ||
post.course.toLowerCase().includes(this.search.toLowerCase()) ||
post.cours.toLowerCase().includes(this.search.toLowerCase()) ||
post.cour.toLowerCase().includes(this.search.toLowerCase()) ||
post.cou.toLowerCase().includes(this.search.toLowerCase()) ||
post.co.toLowerCase().includes(this.search.toLowerCase());
});
}
}
});
这是我正在使用的 HTML 代码
<div id="app">
<div class="search-wrapper">
<input type="text" v-model="search" placeholder="Search"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue" />
</div>
<div class="wrapper">
<div class="col-lg-12 col-md-4 card" v-for="post in filteredList">
<a v-bind:href="post.link" target="_blank">
<img v-bind:src="post.img"/>
<div style="line-height:20%;">
<br>
</div>
<font size="2">{{ post.author }}</font>
<div class="brmedium"></div>
<font size="5"><b><i><em>{{ post.title }}</em></i></b></font>
<a v-bind:href="post.coursel" title="View Credential" target="_blank"><font size="3">{{ post.course }}</font></a>
<a v-bind:href="post.coursl" title="View Credential" target="_blank"><font size="3">{{ post.cours }}</font></a>
<a v-bind:href="post.courl" title="View Credential" target="_blank"><font size="3">{{ post.cour }}</font></a>
<a v-bind:href="post.coul" title="View Credential" target="_blank"><font size="3">{{ post.cou }}</font></a>
<a v-bind:href="post.col" title="View Credential" target="_blank"><font size="3">{{ post.co }}</font></a>
</a>
</div>
</div>
</div>
解决方案
<template>
<div>
<input v-model="text" @input="input" />
<p id="x">
Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et
</p>
</div>
</template>
<script>
/*eslint-disable */
export default {
data() {
return {
t: String(""),
text: String(""),
};
},
mounted() {
this.t = document.querySelector("#x").innerText;
},
methods: {
input() {
document.querySelector("#x").innerHTML = this.t.replaceAll(
this.text,
`<span class='h'>${this.text}</span>`
);
},
},
};
</script>
<style>
.h {
background: red;
}
</style>
简单的高亮搜索这可能会对您有所帮助
推荐阅读
- django - 使用 Django Rest api 搜索模型返回空集
- python - 如何在 python PubSub 订阅者中捕获内部/库线程中发生的异常?
- python - 为什么这个解决方案有 O(nlogn) 复杂度?
- angular - 角路由和放置路由器插座
- python - 如何在调用 plt.show 之前创建多个图形而不显示它们?
- c# - 如果table1包含多个字段与fk到table2的同一列,如何创建从一个表到另一个表的多个外键
- c++ - 类括号初始化被误解为 std::initializer_list 而不是复制构造
- java - 为什么我的代码没有在列表中提供不同的 int 值?
- javascript - 无法读取未定义的属性“getContext” - 电子
- python - 基于其值的标签名称 Ansible 的 EC2 实例的动态脚本清单