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

您可以使用 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 回答
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 回答