I need a secondary review of the following script to help identify an issue of inconsistency with a function. The code allows me to perform a live search on a specified content. If a match is fount, it allows for me to click on a link and toggle() the content of an <em>.
My issues is that most of the time, the toggle function only displays half of the <em> content and I am unable to identify the issue. NOTE: This is only an issue a search is performed. If nothing is typed in the search box and you just click on the list, all works fine.
I appreciate any thoughts on this!
A link to the script in action is here
The code is below:
(function ($) {
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
function live_search(list) {
///*
$('LI STRONG').click(function(e) {
e.preventDefault(); // disable text selection
return false; // disable text selection
});
$('LI STRONG').click(function(e) {
$(this).parent().find('EM').slideToggle();
});
//*/
$(".filterinput")
.change( function () {
var searchtext = $(this).val();
if(searchtext) {
$matches = $(list).find('a:Contains(' + searchtext + ')').parent();
$matches.slideDown();
} else {
$(list).find("li").slideDown(200);
}
return false;
})
.keyup( function () {
$(this).change();
var s = $(this).val().trim();
if (s === '') {
$('#contents LI').show();
return true;
}
$('#contents LI:not(:contains(' + s + '))').hide();
$('#contents LI:contains(' + s + ')').show();
return true;
});
}
$(function () {
live_search($("#contents"));
});
}(jQuery));
Best,
Mossa
