[Vuejs]-How can I highlight filtered text in Vue

by

0👍

Display the found word to a tag span with a class that will highlight the found

computed: {
    filteredNames() {
      return this.names.filter(search => {
        return search
            .toLowerCase()
            .includes(`<span class="highlight"> ${this.searchNameInput.toLowerCase()} </span>`);
      });
    }
  }

0👍

create a function, which adds a span and the class, and use v-html to insert it

<div v-for="names in filteredNames":key="names">
     <p class="name-entry-item" v-html="highlightText(names)"></p>
</div>

and the hightlight function


function highlightText(text) {
   return text.replaceAll(this.searchNameInput, `<span class="highlight">${this.searchNameInput}</span>`)
}

0👍

This may be useful: Js-bin link

Code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
 body{
   background-color:#00000030;
   height:100%;
 }
 #demo{
  padding: 4rem 5rem 0 5rem;
 }
 .search-field{
  width: 100%;
  height: 42px;
 }
.search-icon{
   position: absolute;
  right: 5.5rem;
  top: 4.8rem;
  font-size: 18px;
  cursor: pointer;
}
</style>
<body>
 <div id="demo">
   <input type="text" class="search-field" v-model="searchItem" placeholder="Search" v-on:input="onSearch()">
   <i class="fa fa-times-circle cancel-icon search-icon" v-on:click="clearSearch()"></i>       
   <div class="search-results" v-if="isSearcActive">
       <div v-for="media in searchResults">
        <span v-html="$options.filters.highlight(media.name, searchItem)">{{media.name}}</span>
       </div>
   </div>
   
 </div>     
</body>
<script type = "text/javascript">
 var vm = new Vue({
 el: '#demo',
 filters: {
    highlight(words, query) {
        let reg = new RegExp(query, 'gi');
        return words.replace(reg, function(str) {return '<span style="background: yellow;">'+str+'</span>'});
    }
 },
 data: {
    searchItem: '',
    users:[
      {  'name': 'Jhon Snow', 'age': 28},
      {  'name': 'Antony', 'age': 33},
      {  'name': 'Mark Wood', 'age': 44},
      {  'name': 'Tony Blair', 'age': 24},
      {  'name': 'Tony Jaa', 'age': 21},
      {  'name': 'Micheal Clark', 'age': 51},
      {  'name': 'Mark Antony', 'age': 37},
      {  'name': 'Bay Langer', 'age': 39},
      {  'name': 'Shankar Guru', 'age': 25},
    ],
    isSearcActive: false,
    searchResults: []
 },
 created() {
      
 },
 methods:{
  onSearch: function(){ 
    var self = this;
    let searchValue = this.searchItem;

      this.searchResults =  this.users.filter((item)=>{
                return item.name.toLowerCase().includes(searchValue.toLowerCase());
      });
            
    return this.searchResults;
    
   },
   clearSearch: function(){
    this.searchItem= "";
   }
 },
 watch: {
  searchItem: function(val) {
       if(val.length > 0) {
         this.isSearcActive = true;
        }else{
          this.isSearcActive = false;
         } 
       }
    }
});
</script>
</html>

Leave a comment