实施搜索栏来过滤列表项目

Question

我有一个项目列表，我希望人们可以使用搜索栏进行过滤。当您点击显示内容的分类标题时，该列表目前分为6个分类。

这是我希望用户能够搜索的这些类别的内容。

我已经添加了搜索栏，它应该会在您键入时自动过滤，但它不起作用。

$(document).ready(function() { 
 
\t var tcc = new $.ToClickControl($('.infoContainer')); 
 

 
$('#box').keyup(function(){ 
 
\t var valThis = $(this).val().toLowerCase(); 
 
\t \t if(valThis == ""){ 
 
\t \t \t $('.three-quarters-column > li').show(); 
 
\t \t } else { 
 
\t \t \t $('.three-quarters-column > li').each(function(){ 
 
\t \t \t var text = $(this).text().toLowerCase(); 
 
\t \t \t (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide(); 
 
\t \t }); 
 
\t }; 
 
}); 
 

 
}); 
 

 
;(function($) { 
 

 
    $.ToClickControl = function(el, options) { 
 

 
     var defaults = { 
 
      activeClass: 'activeOption', 
 

 
      onCallback: function() {} 
 
     }; 
 

 
     var plugin = this; 
 

 
     plugin.settings = {}; 
 

 
     var init = function() { 
 
      plugin.settings = $.extend({}, defaults, options); 
 
      plugin.el = el; 
 

 
      active(); 
 
      bindEvents(); 
 
     }; 
 

 
     plugin.Destroy = function() { 
 
      unbindEvents(); 
 
      plugin.el.removeData(); 
 
     }; 
 

 
     var bindEvents = function() { 
 
      var select_container = plugin.el.find('.selectOptions'); 
 
      var matching_container = plugin.el.find('.matchingOptions'); 
 
      var activeClass = plugin.settings.activeClass; 
 

 
      select_container.find('p').on('click', function() { 
 
       if($(this).attr('title') && !$(this).hasClass(activeClass)) { 
 

 
        plugin.el.find('.' + activeClass).removeClass(activeClass); 
 
        $(this).addClass(activeClass); 
 

 
        matching_container.find('div[title]').hide('fast'); 
 
        findMatch(matching_container, $(this).attr('title')).show('fast'); 
 

 
       } 
 
      }); 
 
     }; 
 

 
     var unbindEvents = function() { 
 

 
     }; 
 

 
     var findMatch = function(container, title) { 
 
      return container.children('div[title="' + title + '"]'); 
 
     }; 
 

 
     var active = function() { 
 
      var select_container = plugin.el.find('.selectOptions'); 
 
      var matching_container = plugin.el.find('.matchingOptions'); 
 
      var activeClass = plugin.settings.activeClass; 
 

 
      if(plugin.el.find('.' + activeClass)) 
 
       findMatch(matching_container, select_container.find('.' + activeClass).attr('title')).show(); 
 
     }; 
 

 
     init(); 
 

 
    }; 
 

 
})(jQuery);

.subMainContent { 
 
\t box-sizing:border-box; 
 
\t padding:80px; 
 
\t font-size: 1.2em; 
 
\t line-height:30px; 
 
} 
 
.subMainContent h1 { 
 
\t font-family: 'Oswald'; 
 
} 
 
.subMainContent img { 
 
\t width:100%; 
 
\t height:auto; 
 
\t margin-bottom:40px; 
 
} 
 
.subMainContent .leftColumn { 
 
\t width: 50%; 
 
\t box-sizing:border-box; 
 
\t float:left; 
 
\t padding-right: 40px; 
 
} 
 
.subMainContent .rightColumn { 
 
\t width: 49%; 
 
\t padding-left: 40px; 
 
\t float:left; 
 
\t box-sizing:border-box; 
 
} 
 
.subMainContent .rightColumn ul { 
 
\t box-sizing:border-box; 
 
\t padding-left: 30px; 
 
} 
 

 
@media all and (max-width:768px) { 
 
\t .subMainContent { 
 
\t \t padding:20px; 
 
\t } 
 
\t .subMainContent .leftColumn { 
 
\t \t width:100%; 
 
\t \t padding-right: 0px; 
 
\t } 
 
\t .subMainContent .rightColumn { 
 
\t \t width:100%; 
 
\t \t padding-left: 0px; 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
 
<input placeholder="Search" id="box" type="text" /> 
 
<div class="infoContainer"> 
 
<div class="quarter-column selectOptions"> 
 

 

 
<p class="activeOption" title="1">Centre for American Studies</p> 
 

 
<p title="2">School of Architecture</p> 
 

 
<p title="3">School of Arts</p> 
 

 
<p title="4">School of English</p> 
 

 
<p title="5">School of European Culture and Language</p> 
 

 
<p title="6">School of History</p> 
 
</div> 
 

 
<div class="three-quarters-column matchingOptions"> 
 
<div title="1"> 
 
<li> 
 
<h4>UG American Studies School Rep</h4> 
 

 
<p>Vacant</p> 
 
</li> 
 

 
<li> 
 
<h4>UG American Studies Stage 2</h4> 
 

 
<p>Vacant</p> 
 
</li> 
 

 
<li> 
 
<h4>UG American Studies Stage 3</h4> 
 

 
<p>Vacant</p> 
 
</li> 
 

 
</div> 
 

 
<div title="2"> 
 
<li> 
 
<h4>UG Architecture Stage 2</h4> 
 

 
<p>No Valid Votes</p> 
 
</li> 
 
</div> 
 

 
<div title="3"> 
 
<li> 
 
<h4>UG Drama Joint Honours Stage 2</h4> 
 

 
<p>Tabitha Andrews-Speed</p> 
 
</li> 
 

 
<li> 
 
<h4>UG Drama Joint Honours Stage 3</h4> 
 

 
<p>Ellesse Cooke</p> 
 
</li> 
 

 
<li> 
 
<h4>UG Drama Stage 2</h4> 
 

 
<p>Sophie Burkhardt</p> 
 
</li> 
 

 
<li> 
 
<h4>UG Drama Stage 3</h4> 
 

 
<p>Vacant</p> 
 
</li> 
 

 
<li> 
 
<h4>UG Drama Stage 4</h4> 
 

 
<p>Vacant</p> 
 
</li> 
 

 
<li> 
 
<h4>UG Film Joint Honours Stage 2</h4> 
 

 
<p>Vacant</p> 
 
</li> 
 

 
<li> 
 
<h4>UG Film Joint Honours Stage 3</h4> 
 

 
<p>Vacant</p> 
 
</li> 
 

 
<li> 
 
<h4>UG Film Stage 2</h4> 
 

 
<p>Elena Morresi</p> 
 
</li> 
 

 
<li> 
 
<h4>UG History and Philosophy of Art Stage 3</h4> 
 

 
<p>Vacant</p> 
 
</li> 
 
</div> 
 

 
<div title="4"> 
 
<h4>UG English School Rep</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG Creative Writing Stage 2</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG Creative Writing Stage 3</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG English Literature Stage 2</h4> 
 

 
<p>No Valid Votes</p> 
 

 
<h4>UG English Literature Stage 3</h4> 
 

 
<p>Vacant</p> 
 
</div> 
 

 
<div title="5"> 
 
<h4>UG Classics and Archaeology Stage 3</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG Comparative Literature Stage 2</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG Comparative Literature Stage 3</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG English Language and Linguistics Stage 2</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG English Language and Linguistics Stage 3</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG French Stage 2</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG German Stage 2</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG German Stage 3</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG Hispanic Studies Stage 2</h4> 
 

 
<p>No Valid Votes</p> 
 

 
<h4>UG Hispanic Studies Stage 3</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG Italian Stage 2</h4> 
 

 
<p>Alice Cripps</p> 
 

 
<h4>UG Italian Stage 3</h4> 
 

 
<p>No Valid Votes</p> 
 

 
<h4>UG Religious Studies Stage 3</h4> 
 

 
<p>No Valid Votes</p> 
 
</div> 
 

 
<div title="6"> 
 
<h4>UG History Joint Honours Stage 3</h4> 
 

 
<p>Vacant</p> 
 

 
<h4>UG History Stage 2</h4> 
 

 
<p>No Valid Votes</p> 
 

 
<h4>UG War Studies Stage 3</h4> 
 

 
<p>Vacant</p> 
 
</div> 
 
</div> 
 
</div>

Answer 1

你可以试试这个https://jsfiddle.net/ovd5u25n/1/

更新JS

$('#box').on('keyup',function(){ 
    var valThis = $(this).val().toLowerCase();  
     if(valThis == ""){ 
     $('.three-quarters-column li').show(); 
     } else { 
     $('.three-quarters-column li').each(function(i,item){ 
     var text = $(item).text().toLowerCase(); 
     console.log($(item).find('p').text()); 
     if(text.indexOf(valThis) >= 0) { 
     $(item).show()   
     } 
     else{ 
      $(item).hide(); 
     } 
     }); 
    }; 
    });