1

このプラグインは、正規表現を使用して、検索入力に基づいてコンテンツをリアルタイムで並べ替えます。現在、スクリプトは入力と同時に検索を行っています。

コードは次のとおりです。

$.fn.simpleContentSearch = function ( options ) {

var settings = {
    'active'    : 'active',
    'normal'    : 'normal',
    'searchList' : 'searchable tr',
    'searchItem' : 'td',
    'effect' : 'none' // fade, none
};

var base = this;
var options = $.extend(settings, options);

function startSearching(query)
{
    $( '.' + settings.searchList ).each(function () 
    {
        $(this).children( settings.searchItem ).each(function () 
        {
            var elem = $(this);

            if (!elem.html().match(new RegExp('.*?' + query + '.*?', 'i'))) {

                if( settings.effect == 'fade' ){
                    $(this).parent( '.' + settings.searchList ).fadeOut();
                } else {
                    $(this).parent( '.' + settings.searchList ).hide();
                }

            } else {

                if( settings.effect == 'fade' ){
                    $(this).parent( '.' + settings.searchList ).fadeIn();
                } else {
                    $(this).parent( '.' + settings.searchList ).show();
                }

                return false;
            }

            return;
        });
    });
}

return this.each(function() {    

    // On Blur
    base.blur(function () 
    {
        var elem = base;
        elem.removeClass().addClass(options.normal);
    });

    // On Focus
    base.focus(function () 
    {
        var elem = base;
        elem.removeClass().addClass(options.active);
    });

    //Keyup
    base.keyup(function () 
    {
        startSearching(base.val());
    });

    return this;

});

}

私がやりたいのは、「text1」「text2」のようないくつかのボタンを作成し、それらをクリックすると、入力せずに「text1」を検索できるようにすることです。これを行う方法について何か提案はありますか? これがスクリプトの仕組みです：jsfiddle

ありがとうございました！

4

3 に答える 3

1

検索ボックスの値を自動的に検索する値に設定し、そのkeyup()イベントを呼び出して強制的に検索することができます。

たとえば、次のような入力を作成できます。

<input type="button" value="Intro" class="searchButton">

次に$(document).ready()、次の関数をクリック イベントにバインドできます。

$('.searchButton').click(function (eventObject) {
    $('.searchFilter').val(eventObject.target.value).keyup();
});

これにより、ボタンのvalue属性にリストした用語が自動的に検索されます。

これが実際の例です: http://jsfiddle.net/gvH77/

于 2013-05-09T18:01:32.720 に答える
0

私は CodeCanyon でこれを見つけました。それはまさにあなたが必要としているものか、この質問への回答から実際に作成したものです: http://codecanyon.net/item/simple-content-search/1850151?ref=arctic_ark

于 2015-06-22T17:35:47.050 に答える