jQuery Filter Accordion Items
Accordion with live jquery filter. Search results displaying while you are typing.
HTML
<form id="filter-form">Filter:
<input name="filter" id="filter" value="" maxlength="30" size="30" type="text">
</form>
<dl class="accordion">
<dt><a href="">Panel Jedan Ipsum</a></dt>
<dt><a href="">Panel Dva Ipsum</a></dt>
<dt><a href="">Panel Dva Loreim</a></dt>
</dl>
JavaScript
jQuery.uiTableFilter = function(jq, phrase, column, ifHidden) {
var new_hidden = false;
if (this.last_phrase === phrase) return false;
var phrase_length = phrase.length;
var words = phrase.toLowerCase().split(" ");
// these function pointers may change
var matches = function(elem) {
elem.show()
}
var noMatch = function(elem) {
elem.hide();
new_hidden = true
}
var getText = function(elem) {
return elem.text()
}
// if added one letter to last time,
// just check newest word and only need to hide
if ((words.size > 1) && (phrase.substr(0, phrase_length - 1) ===
this.last_phrase)) {
if (phrase[-1] === " ") {
this.last_phrase = phrase;
return false;
}
var words = words[-1]; // just search for the newest word
// only hide visible rows
matches = function(elem) {;
}
var elems = jq.find("dt:visible");
jQuery('.accordion > dd').hide();
} else {
new_hidden = true;
var elems = jq.find("dt");
jQuery('.accordion > dd').hide();
}
elems.each(function() {
var elem = jQuery(this);
jQuery.uiTableFilter.has_words(getText(elem), words, false) ?
matches(elem) : noMatch(elem);
});
last_phrase = phrase;
if (ifHidden && new_hidden) ifHidden();
return jq;
};
jQuery.uiTableFilter.last_phrase = ""
jQuery.uiTableFilter.has_words = function(str, words, caseSensitive) {
var text = caseSensitive ? str : str.toLowerCase();
for (var i = 0; i < words.length; i++) {
if (text.indexOf(words[i]) === -1) return false;
}
return true;
}
// Filter
jQuery(function() {
var theTable = jQuery('dl');
jQuery("#filter").keyup(function() {
jQuery.uiTableFilter( theTable, this.value );
})
});
// Accordion
(function(jQuery) {
var allPanels = jQuery('.accordion > dd').hide();
jQuery('.accordion > dt > a').click(function() {
allPanels.slideUp();
jQuery(this).parent().next().slideDown();
return false;
});
})(jQuery);