[英]How do I highlight search queries using Vue+html
在這里我的搜索正在工作,但我是一個新手,不知道如何使用 npm ......我正在使用 HTML 和 VueJS 來實現這一點,並成功創建了搜索過濾器,但無法實現高亮過濾器..一些線索是使用的 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>
簡單的高亮搜索這可能會對您有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.