// Initializations --------------------------- var escapeRegex = function (value) { return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") .replace(/[aàáäãâ]/g, "[a\xE0\xE1\xE2\xE3\xE4]") .replace(/[eèéëê]/g, "[e\xE8\xE9\xEA\xEB]") .replace(/[iìíïî]/g, "[i\xEC\xED\xEE\xEF]") .replace(/[oòóöõô]/g, "[o\xF2\xF3\xF4\xF5\xF6]") .replace(/[uùúüû]/g, "[u\xF9\xFA\xFB\xFC]") .replace(/[cç]/g, "[c\xE7]") .replace(/[ñ]/g, "[n\xF1]"); }; // Event bindings ---------------------------- $('#txt2find').on('keyup', function (e) { KeyUpOn_txt2Find(e) }); function KeyUpOn_txt2Find(e) { var _val = $(e.target).val(); filterByText(_val); } // Business rules ---------------------------- // Shows all rows function showAllRbList () { var _$label, _val; $('#ul_list').find('.js_li_item').each(function () { _$label = $(this).find('.js_label'); _val = _$label.text(); _$label.html(_val).closest('.js_li_item').show(); }); }; function filterByText (pVal) { var _re = new RegExp(pVal, "i"), termSplited = pVal.match(/\w+/g), _$el = '', _label; showAllRbList(); $('.js_label').each(function () { _$el = $(this); if (!_$el.text().search(_re)) { _label = _$el.text(); for (var i = 0; termSplited && i < termSplited.length; i++) { _label = _label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + escapeRegex(termSplited[i]) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"); } _$el.html(_label).closest('.js_li_item').show(); } else _$el.closest('.js_li_item').hide(); }); };
<h4>Type "line" or "third"</h4> <input type="text" id="txt2find" /> <ul id="ul_list"> <li class="js_li_item"> <input type="radio" name="rb" id="rb1" value="1"/> <label for="rb1"><span class="js_label">line first</span> </li> <li class="js_li_item"> <input type="radio" name="rb" id="rb2" value="2"/> <label for="rb2"><span class="js_label">Line second</span> </li> <li class="js_li_item"> <input type="radio" name="rb" id="rb3" value="1"/> <label for="rb3"><span class="js_label">Third line</span> </li> </ul>
ul { list-style-type: none; padding: 0px; margin: 0px; }