为什么搜索表单不工作？

Question

我使用实时搜索表单working version, 但为什么我的工作不正常？ 我geuss这是因为div class =“包装常见问题”是搞砸了事情？

对不起，这个懒汉html，但复制1500行和4 CSS文档不会帮助。

在此先感谢！

<script> 
 

 
\t 'use strict'; 
 

 

 
\t // search & highlight 
 

 
\t ;(function($, window, document, undefined) 
 
\t { 
 
\t \t var $container = $('.faq'); 
 
\t \t if(!$container.length) return true; 
 

 
\t \t var $input \t \t \t = $container.find('input'), 
 
\t \t \t $notfound \t \t = $container.find('.faq__notfound'), 
 
\t \t \t $items \t \t \t = $container.find('> ul > li'), 
 
\t \t \t $item \t \t \t = $(), 
 
\t \t \t itemsIndexed \t = []; 
 

 
\t \t $items.each(function() 
 
\t \t { 
 
\t \t \t itemsIndexed.push($(this).text().replace(/\s{2,}/g, ' ').toLowerCase()); 
 
\t \t }); 
 

 
\t \t $input.on('keyup', function(e) 
 
\t \t { 
 
\t \t \t if(e.keyCode == 13) // enter 
 
\t \t \t { 
 
\t \t \t \t $input.trigger('blur'); 
 
\t \t \t \t return true; 
 
\t \t \t } 
 

 
\t \t \t $items.each(function() 
 
\t \t \t { 
 
\t \t \t \t $item = $(this); 
 
\t \t \t \t $item.html($item.html().replace(/<span class="highlight">([^<]+)<\/span>/gi, '$1')); 
 
\t \t \t }); 
 

 
\t \t \t var searchVal = $.trim($input.val()).toLowerCase(); 
 
\t \t \t if(searchVal.length) 
 
\t \t \t { 
 
\t \t \t \t for(var i in itemsIndexed) 
 
\t \t \t \t { 
 
\t \t \t \t \t $item = $items.eq(i); 
 
\t \t \t \t \t if(itemsIndexed[ i ].indexOf(searchVal) != -1) 
 
\t \t \t \t \t \t $item.removeClass('is-hidden').html($item.html().replace(new RegExp(searchVal+'(?!([^<]+)?>)', 'gi'), '<span class="highlight">$&</span>')); 
 
\t \t \t \t \t else 
 
\t \t \t \t \t \t $item.addClass('is-hidden'); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t else $items.removeClass('is-hidden'); 
 

 
\t \t \t $notfound.toggleClass('is-visible', $items.not('.is-hidden').length == 0); 
 
\t \t }); 
 
\t })(jQuery, window, document); 
 

 

 
\t // toggling items on title press 
 

 
\t ;(function($, window, document, undefined) 
 
\t { 
 
\t \t $(document).on('click', '.faq h2 a', function(e) 
 
\t \t { 
 
\t \t \t e.preventDefault(); 
 
\t \t \t $(this).parents('li').toggleClass('is-active'); 
 
\t \t }); 
 
\t })(jQuery, window, document); 
 

 

 
\t // auto-show item content when show results reduces to single 
 

 
\t ;(function($, window, document, undefined) 
 
\t { 
 
\t \t var $container = $('.faq'); 
 
\t \t if(!$container.length) return true; 
 

 
\t \t var $input \t \t = $container.find('input'), 
 
\t \t \t $items \t \t = $container.find('> ul > li'), 
 
\t \t \t $item \t \t = $(); 
 

 
\t \t $input.on('keyup', function() 
 
\t \t { 
 
\t \t \t $item = $items.not('.is-hidden'); 
 
\t \t \t if($item.length == 1) 
 
\t \t \t \t $item.addClass('js--autoshown is-active'); 
 
\t \t \t else 
 
\t \t \t \t $items.filter('.js--autoshown').removeClass('js--autoshown is-active'); 
 
\t \t }); 
 
\t })(jQuery, window, document); 
 

 
</script>

<!-- Search bar --> 
 
     <div class="search-wrapper faq" > 
 
      <div class="container container--add faq"> 
 

 
        <input type="search" value="" placeholder="Search"> 
 
       
 
      </div> 
 
     </div> 
 

 
<!-- Movie preview item --> 
 
     
 
      <div id="Page1" class="page" style=""> 
 
      <ul> 
 
      \t <li id="faq-1"> 
 
      \t <h2><a href="#faq-1" class="movie__title link--huge">Last Vegas (2013)</a></h2> 
 
       <div class="movie movie--preview movie--full release"> 
 
        <div class="col-sm-3 col-md-2 col-lg-2"> 
 
          <div class="movie__images"> 
 
           <img alt='' src="images/movie/movie-sample1.jpg"> 
 
          </div> 
 
        </div> 
 

 
        <div class="col-sm-9 col-md-10 col-lg-10 movie__about"> 
 
          
 

 
                
 
           </div> 
 
        </div> 
 

 
        <div class="clearfix"></div>          
 

 
       </div> 
 
       </li> 
 
       <!-- end movie preview item --> 
 

 
       <!-- Movie preview item --> 
 
       <li id="faq-2"> 
 
      \t <h2><a href="#faq-2" class="movie__title link--huge">the book thief (2013)</a></h2> 
 
       <div class="movie movie--preview movie--full comments"> 
 
        <div class="col-sm-3 col-md-2 col-lg-2"> 
 
          <div class="movie__images"> 
 
           <img alt='' src="images/movie/movie-sample2.jpg"> 
 
          </div> 
 
        </div> 
 

 
        <div class="col-sm-9 col-md-10 col-lg-10 movie__about"> 
 
          
 

 
          
 
           
 
          </div> 
 
        </div> 
 

 
        <div class="clearfix"></div> 
 
      </div> 
 
       </div> 
 
       </li> 
 
      </ul> 
 
       <!-- end movie preview item --> 
 
</div>

Answer 1

它看起来像你过早地封闭在HTML中.faq格 - 来自前移动到最后，以内容包装成到父.faq股利。另外 - 你在ul中也有一些关闭问题 - 我已经调整了一下 - 将下面的代码插入到你的 - 用我的替换整个部分来看看是否有帮助。这是文本缩进和检查开启/关闭是否有用的例子。

<!-- Search bar --> 
    <div class="search-wrapper faq" > 
     <div class="container container--add faq"> 
      <input type="search" value="" placeholder="Search"> 
     </div> 

     <!-- Movie preview item --> 
     <div id="Page1" class="page" style=""> 
     <ul> 
      <li id="faq-1"> 
       <h2><a href="#faq-1" class="movie__title link--huge">Last Vegas (2013)</a></h2> 
       <div class="movie movie--preview movie--full release clearfix"> 
        <div class="col-sm-3 col-md-2 col-lg-2"> 
         <div class="movie__images"> 
          <img alt='' src="images/movie/movie-sample1.jpg"> 
         </div> 
        </div> 
        <div class="col-sm-9 col-md-10 col-lg-10 movie__about"> 
        </div> 
       </div> 
      </li><!-- end movie preview item --> 
      <li id="faq-2"><!-- Movie preview item --> 
       <h2><a href="#faq-2" class="movie__title link--huge">the book thief (2013)</a></h2> 
       <div class="movie movie--preview movie--full comments clearfix"> 
        <div class="col-sm-3 col-md-2 col-lg-2"> 
         <div class="movie__images"> 
          <img alt='' src="images/movie/movie-sample2.jpg"> 
         </div> 
        </div> 

        <div class="col-sm-9 col-md-10 col-lg-10 movie__about"> 
        </div> 
       </div> 
      </li> 
     </ul><!-- end movie preview item --> 
     </div><!--end of page 1 div--> 
    </div><!--end of faq-->