Question

我使用实时搜索表单{{3}}，但为什么我的工作不起作用呢？我认为这是因为div class =“wrapper faq”搞砸了？

对于懒散的HTML很抱歉，但是复制1500行和4个css文档并没有帮助。

提前谢谢！

<script>

	'use strict';


	// search & highlight

	;( function( $, window, document, undefined )
	{
		var $container = $( '.faq' );
		if( !$container.length ) return true;

		var $input			= $container.find( 'input' ),
			$notfound		= $container.find( '.faq__notfound' ),
			$items			= $container.find( '> ul > li' ),
			$item			= $(),
			itemsIndexed	= [];

		$items.each( function()
		{
			itemsIndexed.push( $( this ).text().replace( /\s{2,}/g, ' ' ).toLowerCase() );
		});

		$input.on( 'keyup', function( e )
		{
			if( e.keyCode == 13 ) // enter
			{
				$input.trigger( 'blur' );
				return true;
			}

			$items.each( function()
			{
				$item = $( this );
				$item.html( $item.html().replace( /<span class="highlight">([^<]+)<\/span>/gi, '$1' ) );
			});

			var searchVal = $.trim( $input.val() ).toLowerCase();
			if( searchVal.length )
			{
				for( var i in itemsIndexed )
				{
					$item = $items.eq( i );
					if( itemsIndexed[ i ].indexOf( searchVal ) != -1 )
						$item.removeClass( 'is-hidden' ).html( $item.html().replace( new RegExp( searchVal+'(?!([^<]+)?>)', 'gi' ), '<span class="highlight">$&</span>' ) );
					else
						$item.addClass( 'is-hidden' );
				}
			}
			else $items.removeClass( 'is-hidden' );

			$notfound.toggleClass( 'is-visible', $items.not( '.is-hidden' ).length == 0 );
		});
	})( jQuery, window, document );


	// toggling items on title press

	;( function( $, window, document, undefined )
	{
		$( document ).on( 'click', '.faq h2 a', function( e )
		{
			e.preventDefault();
			$( this ).parents( 'li' ).toggleClass( 'is-active' );
		});
	})( jQuery, window, document );


	// auto-show item content when show results reduces to single

	;( function( $, window, document, undefined )
	{
		var $container = $( '.faq' );
		if( !$container.length ) return true;

		var $input		= $container.find( 'input' ),
			$items		= $container.find( '> ul > li' ),
			$item		= $();

		$input.on( 'keyup', function()
		{
			$item = $items.not( '.is-hidden' );
			if( $item.length == 1 )
				$item.addClass( 'js--autoshown is-active' );
			else
				$items.filter( '.js--autoshown' ).removeClass( 'js--autoshown is-active' );
		});
	})( 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>
            	<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">
                     <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">
            	<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 div - 将之前的内容移动到结尾，以便将内容包装到父.faq div中。另外 - 你在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-->

为什么搜索表单不起作用？

1 个答案: