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>
  <dd>1111111111111111111111111111</dd>

  <dt><a href="">Panel Dva Ipsum</a></dt>
  <dd>22222222222222222222222222222</dd>

  <dt><a href="">Panel Dva Loreim</a></dt>
  <dd>22222222222222</dd>

</dl>

CSS

.accordion {
	  margin: 50px;
	}
	
	.accordion dt,
	.accordion dd {
	  padding: 10px;
	  border: 1px solid black;
	  border-bottom: 0;
	}
	
	.accordion dt:last-of-type,
	.accordion dd:last-of-type {
	  border-bottom: 1px solid black;
	}
	
	.accordion dt a,
	.accordion dd a {
	  display: block;
	  color: black;
	  font-weight: bold;
	}
	
	.accordion dd {
	  border-top: 0;
	  font-size: 12px;
	}
	
	.accordion dd:last-of-type {
	  border-top: 1px solid white;
	  position: relative;
	  top: -1px;
	}

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("dd:visible");
    jQuery('.accordion > dd').hide();
  } else {
    new_hidden = true;
    var elems = jq.find("dd");
    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);
  })
});

// Disable Enter in input
$('#filter').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

// Accordion
(function(jQuery) {

  var allPanels = jQuery('.accordion >...