0

yahoo検索とフィルター要素に非常によく似たラジオボタンフィルターを備えた検索ボックスがあり、ユーザーは検索する前にフィルターを選択して検索を絞り込むことができます。

ユーザーがフィルターをクリックすると、「すべて検索」、「ブロードバンドを検索」などのメッセージが検索ボックスに表示されます。

私はそれをほとんど働いています。各フィルターをクリックすると、メッセージが正しく表示されます。私が抱えている問題は、（デフォルトの）「すべて検索」メッセージがページの読み込み時に表示されないことです。

以下は私がこれまでに持っているjQueryです

$('.searchFilters label').click(function(){                                      
        var input = $('#searchId');                                      
        input.val('Search '+$(this).text()).addClass('empty');
    }); 
    $('#searchForm').submit(function(){
        var input = $('#searchId');
        if(input.hasClass('empty')){
            $('.searchFilters label').val('Enter search term');
            input.blur();
            $('#autocomplete').css({'display':'none'});         
            return false;
        } else{
            return true;
        }
    });
    $('#searchId').click(function(){
        $(this).val('').removeClass('empty');   
        $('#autocomplete').css({'display':'block'});
    });

助けてくれてありがとう

4

2 に答える 2

0

次のコードを追加することでこの質問を解決できましたが、現在はすべて正常に動作しています。

// injects "Search (label)" into search box on page load
// injects "Search (label)" into search box on main nav click
$('.searchFilters label').each(function(index){
    if($(this).attr('class')){                              
        $('#searchId').val('Search '+$(this).text());
    }   
});

ご協力いただきありがとうございます

完全なスクリプトは次のとおりです。

// Sets the text for in the searchbox for the corresponding searchbox filter
;(function(){                                  
    // injects "Search (label)" into search box on page load
    // injects "Search (label)" into search box on main nav click
    $('.searchFilters label').each(function(index){
        if($(this).attr('class')){                              
            $('#searchId').val('Search '+$(this).text());
        }   
    });

    // injects "Search (label)" into search box on filter click
    $('.searchFilters label').click(function(){                                      
        var input = $('#searchId');                                      
        input.val('Search '+$(this).text()).addClass('empty');      
    }); 

    // Stops form submitting if "Search label" is displayed in search box
    $('#searchForm').submit(function(){
        var input = $('#searchId');
        if(input.hasClass('empty')){
            $('.searchFilters label').val('Enter search term');
            input.blur();
            $('#autocomplete').css({'display':'none'});         
            return false;
        } else{
            return true;
        }
    });

    // Clears search box onclick
    $('#searchId').click(function(){
        $(this).val('').removeClass('empty');   
        $('#autocomplete').css({'display':'block'});
        $(this).focus();
    });
})();
于 2012-12-05T20:56:25.913 に答える
0

jQuery の$(document).ready()関数を使用して、ページの読み込みを処理できます。

入力フィールドの値を ready 関数内に設定するだけです。

$(document).ready(function()
{
    $('.searchFilters label').click(function(){                                      
        var input = $('#searchId');                                      
        input.val('Search '+$(this).text()).addClass('empty');
    }); 
    $('#searchForm').submit(function(){
        var input = $('#searchId');
        if(input.hasClass('empty')){
            $('.searchFilters label').val('Enter search term');
            input.blur();
            $('#autocomplete').css({'display':'none'});         
            return false;
        } else{
            return true;
        }
    });
    $('#searchId').click(function(){
        $(this).val('').removeClass('empty');   
        $('#autocomplete').css({'display':'block'});
    });

    // Get the selected item and execute a fake click on it's label
    $('.searchFilters input[type=radio]:checked').parent().click();
});

labelラジオボタンはタグ内にあると想定しています。

このコードはテストしていませんが、参考になるはずです。

于 2012-12-05T12:44:56.280 に答える