JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="input" name="input"/>
<div id="content-block"><p><div class="col-md-6 ln-- listNavHide">
<button type="button" class="col-md-12 head" data-toggle="collapse" data-target="#tab_6">
-25°C Upright Freezers <i class="fa fa-caret-down pull-right"></i>
</button>
<div id="tab_6" class="collapse"><div class="col-md-12"><div class="col-md-6">
<a data-placement="top" data-html="true" class="text-center range thumbnail product-link" href="http://labtron.us/-25°C-Upright-Freezers-LUF-A20" data-toggle="tooltip" title="-25°C Upright Freezers LUF-A20 "Capacity : 270 Liters"" data-original-title="Capacity : 270 Liters">-25°C Upright Freezers LUF-A20 <hr><small>"Capacity : 270 Liters"</small></a>
</div><div class="col-md-6">
<a data-placement="top" data-html="true" class="text-center range thumbnail product-link" href="http://labtron.us/-25°C-Upright-Freezers-LUF-A21" data-toggle="tooltip" title="-25°C Upright Freezers LUF-A21 "Capacity : 450 Liters"" data-original-title="Capacity : 450 Liters">-25°C Upright Freezers LUF-A21 <hr><small>"Capacity : 450 Liters"</small></a>
</div></div></div></div> </p></div>
CSS
.highlight { background-color:blue}
JavaScript
$('#input').live('keyup', function() {
$('#input').trigger('highLight');
});
$('#input').bind('highLight', function() {
var o = {
words: $('input[name="input"]').val()
};
highlight("content-block", o);
});
function highlight(id, options) {
var o = {
words: '',
caseSensitive: false,
wordsOnly: true,
template: '$1<span class="highlight">$2</span>$3'
},
pattern;
$.extend(true, o, options || {});
if (o.words.length == 0) {
return;
}
pattern = new RegExp('(>[^<.]*)(' + o.words + ')([^<.]*)', o.caseSensitive ? "" : "ig");
$('#' + id).each(function() {
$('span.highlight', this).replaceWith($('span.highlight', this).text()); // Fix
var content = $(this).html();
if (!content) return;
$(this).html(content.replace(pattern, o.template));
});
}