shuuji3.xyz
[READ-ONLY] Mirror of https://github.com/shuuji3/partial-text-match. A simple (inefficient) partial text matching and highlighting with
<mark> tag
shuuji3.github.io/partial-text-match/
984 B
37 lines
1<script setup lang="ts">
2import allWords from './words.json'
3
4const { search, mark } = useSearch(allWords)
5
6const q = defineModel<string>('')
7const words = computed(() => q.value ? search(q.value).map(word => mark(word, q.value)) : allWords)
8</script>
9
10<template>
11 <div>
12 <NuxtRouteAnnouncer />
13 <h1>partial-text-match</h1>
14 <p>
15 A simple (inefficient) partial text matching and highlighting with <mark>`<mark>`</mark> tag.
16 You can find other libraries like <a href="https://github.com/mixpanel/fuzzbunny">fuzzbunny</a> or others for better implementations.
17 </p>
18 <p>
19 <strong>GitHub:</strong> <a href="https://github.com/shuuji3/partial-text-match">shuuji3/partial-text-match</a>
20 </p>
21 <p>
22 <label>Query: </label>
23 <input type="search" v-model="q" autofocus />
24 </p>
25 <ul>
26 <li v-for="word in words">
27 <span v-html="word" />
28 </li>
29 </ul>
30 </div>
31</template>
32
33<style>
34mark {
35 padding: 0;
36}
37</style>