JSFiddle - React, Tailwind, and code Playground
HTML
<div style="margin-bottom: 5px;">
<input type="text" class="search-questions-field" placeholder="Søg spørgsmål">
<input type="submit" class="search-question-button" value="Søg">
</div>
<div class="searchin">Hvordan redigerer jeg min profil?</div>
<div class="searchin">Hvordan uploader jeg billeder til min profil?</div>
<div class="searchin">Hvordan ændrer jeg mit profilbillede?</div>
<div class="searchin">Hvad er en double?</div>
CSS
body {
font-family: Arial;
font-size: 12px;
}
.searchin {
background: #fff;
border: 1px solid #dfdfdf;
margin-bottom: 5px;
padding: 5px;
width: 400px;
}
.search-successful {
background: #eee;
}
JavaScript
$.extend($.expr[":"], {
"contains-ci": function (elem, i, match, array) {
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$(document).ready(function () {
$(".search-question-button").click(function (e) {
$(".searchin").removeClass(".search-successful");
$(".searchin:contains-ci('" + $(".search-questions-field").val() + "')").addClass("search-successful");
});
});