Блог

Здесь мой поиск работает, но я новичок и не знаю, как использовать npm…Я использую HTML с VueJS для реализации этого и успешно создал фильтр поиска, но не смог реализовать фильтр выделения..Некоторые лиды являются markjs.используемый ввод-вывод и некоторые другие пользовательские фильтры 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>
 

Простой поиск по выделению это может помочь вам