+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script>
+jQuery(function($) {
+ $('#q').on('change', function(e) {
+ var el = e.target;
+ var o = el.options;
+ var v = o[o.selectedIndex].value;
+ location.href = "?q=" + v;
+ });
+
+ var $lines = $('#lines>li');
+ var $count = $('#count');
+ $('.filter').on('keyup', function() {
+ var filter_in = $('#filter').val();
+ var filter_out = $('#filter_out').val().trim();
+ var do_filter_out = filter_out.length > 0;
+ var count = 0;
+ $lines.each(function() {
+ var $line = $(this);
+ var text = $line.text();
+ // everything is visible by default
+ $line.removeClass('hidden');
+ count++;
+ // but we hide lines that do not match filter
+ // OR match non-empty filter-out
+ if ( ! text.match(filter_in) || (do_filter_out && text.match(filter_out)) ) {
+ $line.addClass('hidden');
+ count--;
+ }
+ });
+ $count.html(count);
+ });
+ $count.html($lines.length);
+});
+</script>