jQuery关键字高亮显示_页面关键词高亮插件

本Demo是一款jQuery关键词查找元素高亮代码的插件、一款非常实用的搜索框页面查找关键词元素的源代码代码、而且还可以通过用户输入的关键过滤内容、效果非常不错、可以快速集成到自己的搜索界面上面、效果如下

keyup处理

$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">&$amp;</span>´ ) );
            else
                $item.addClass( ´is-hidden´ );
        }
    }
    else $items.removeClass( ´is-hidden´ );

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

添加Class代码

;( 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 );

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1sjC8Mq5 密码: dbx8