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
$(document).ready(function(){
// Extend jquery with icontains, that is case insensitive
jQuery.expr[":"].icontains = jQuery.expr.createPseudo(function (arg) {
return function (elem) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// Click submit button event
$(".search-question-button").click(function () {
// Take the value of input field and split it into an array
var searchTextArray = $('.search-questions-field').val().split(' ');
// Remove search-successful class
$('.search-successful').removeClass('search-successful');
// Loop that checks if elements with the .searchin class contains a word from the array
for (var i = 0; i < searchTextArray.length; ++i) {
$(".searchin:icontains('" + searchTextArray[i] + "')").addClass("search-successful");
}
});
})