14.07 Filter - Highlight the Search Query on Matching Tasks

src/components/Tasks/Task.vue

@@ -13,8 +13,9 @@
 
     <q-item-section>
       <q-item-label
-        :class="{ 'text-strikethrough' : task.completed }">
-          {{ task.name }}
+        :class="{ 'text-strikethrough' : task.completed }"
+        v-html="$options.filters.searchHighLight(task.name, search)"
+      >
       </q-item-label>
     </q-item-section>
 
@@ -71,7 +72,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 import editTask from 'components/Tasks/Modals/EditTask.vue'
 import { date } from 'quasar'
 const { formatDate } = date
@@ -90,7 +91,32 @@ export default {
   filters: {
     niceDate (value) {
       return formatDate(value, 'MMM D')
+    },
+    searchHighLight (value, search) {
+      if (search) {
+        var output = ''
+        var ms = search.toLocaleLowerCase()
+        var ml = search.length
+        var str = value
+
+        while (str.length) {
+          const rts = str.toLocaleLowerCase()
+          var pos = rts.indexOf(ms)
+          if (pos === -1) {
+            output += str
+            str = ''
+          } else {
+            output += str.substr(0, pos) + '<span class="bg-yellow-6">' + str.substr(pos, ml) + '</span>'
+            str = str.substr(pos + ml)
           }
+        }
+        return output
+      }
+      return value
+    }
+  },
+  computed: {
+    ...mapState('tasks', ['search'])
   },
   methods: {
     ...mapActions('tasks', ['updateTask', 'deleteTask']),