Question

我有一个带有单选按钮过滤器的搜索框，非常类似于雅虎搜索和过滤元素，用户可以通过在搜索前选择过滤器来优化搜索。

当用户点击过滤器时，我希望在搜索框中显示一条消息，例如“全部搜索”，“搜索宽带”等。

我主要工作。如果单击每个过滤器，则消息将正确显示。我遇到的问题是（默认）“全部搜索”消息没有出现在页面加载上。

下面是我到目前为止的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'});
    });

提前感谢您提供任何帮助

Answer 1

您可以使用jQuery的$(document).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标记内。

我没有测试过这段代码，但它应该给你一个指示。

Answer 2

我设法通过添加以下代码来解决这个问题，现在一切正常。

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

使用jQuery动态搜索框单选按钮过滤器值

2 个答案: