add search input for lexicon

pages/lexique.vue

 <template>
 	<main class="container">
 		<h2 class="text-center mb-5 font-weight-light">{{ $t("lexique") }}</h2>
+		<div class="row">
+			<div class="col-md-6 mx-auto">
+				<div class="form-group">
+					<input
+						v-model="search"
+						type="text"
+						class="form-control"
+						id="exampleFormControlInput1"
+						placeholder="Votre recherche" />
+				</div>
+			</div>
+		</div>
 		<div class="table-responsive">
 			<table class="table table-striped">
 				<thead>
@@ -9,8 +21,8 @@
 				</thead>
 				<tbody>
 					<tr v-for="mot in listeMotsTrad" :key="mot.title">
-						<th scope="row">{{ mot.title }}</th>
-						<td>{{ mot.desc }}</td>
+						<th scope="row" v-html="mot.title"></th>
+						<td v-html="mot.desc"></td>
 					</tr>
 				</tbody>
 			</table>
@@ -32,6 +44,7 @@ export default {
 					active: true
 				}
 			],
+			search: "",
 			listeMots: [
 				"dossier",
 				"adhesion",
@@ -68,14 +81,39 @@ export default {
 			es: "/lexico"
 		}
 	},
+	methods: {
+		wrapSearch(str, txt) {
+			if (str == "") {
+				return txt
+			}
+
+			return txt.replace(new RegExp(str, "gi"), "<mark>$&</mark>")
+		}
+	},
 	computed: {
 		listeMotsTrad() {
 			let retour = []
 			this.listeMots.forEach((el) => {
-				retour.push({
-					desc: this.$t(el + ".desc"),
-					title: this.$t(el + ".title")
-				})
+				let isFound = false
+				let desc = this.$t(el + ".desc")
+				let title = this.$t(el + ".title")
+
+				if (desc.toLowerCase().includes(this.search.toLowerCase())) {
+					desc = this.wrapSearch(this.search, desc)
+					isFound = true
+				}
+
+				if (title.toLowerCase().includes(this.search.toLowerCase())) {
+					title = this.wrapSearch(this.search, title)
+					isFound = true
+				}
+
+				if (isFound) {
+					retour.push({
+						desc: desc,
+						title: title
+					})
+				}
 			})
 			retour.sort((a, b) => {
 				if (a.title < b.title) {