开发者

Calling jQuery function on tab click

I have a Google Instant style jQuery search script that uses tabs for the user to define which search type they want to use. However, when the user searches for something and then selects a new search type (clicks on a tab) they have to go to the text box and press enter to submit their query again.

It was recommended for me to call the loadurl() function on click of one of the tabs but how can I do this and load the correct content for the correct tab? I hope you can understand what I'm trying to describe.

My current jQuery code is:

$(document).ready(function () {
    function loadurl() {
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function (results) {
                $('results').html(results);
            }
        });
    }
    $('[id^=type_]').click(function () {
        type = this.id.replace('type_', '');
        $('[id^=type_]').removeClass('selected');
        $('#type_' + type).addClass('selected');
    });
    $('#type_search').click();
    $('input').keyup(function () {
        query = $(this).val();
        url = '/' + type + '/' + query + '/';
        window.location.hash = '' + type + '/' + query + '/';
        document.title = $(this).val() + ' - My Se开发者_C百科arch Script';
        $('results').show();
        if (query == '') {
            window.location.hash = '';
            document.title = 'My Search Script';
            $('results').hide();
        }
        loadurl();
    });
});

My current HTML code is:

<div id='nav'> 
<a id='type_search'>All</a> 
<a id='type_images'>Images</a> 
<a id='type_videos'>Videos</a> 
<a id='type_news'>News</a> 
<a id='type_social'>Social</a> 
</div>
<input type='text' autocomplete='off'>

<div id='results'></div>


Trigger the input box keyup event whenever any tab is selected. If you want you can also check if currently selected tab is clicked do not do anything just return.

$(document).ready(function () {
    function loadurl() {
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function (results) {
                $('#results').html(results);
            }
        });
    }

    $('[id^=type_]').click(function () {
        type = this.id.replace('type_', '');
        $('[id^=type_]').removeClass('selected');
        $('#type_' + type).addClass('selected');
        $('input').trigger('keyup');
    });

    $('#type_search').click();

    $('input').keyup(function () {
        query = $(this).val();
        if(!query)
          return;
        url = '/' + type + '/' + query + '/';
        window.location.hash = '' + type + '/' + query + '/';
        document.title = $(this).val() + ' - My Search Script';
        $('#results').show();
        if (query == '') {
            window.location.hash = '';
            document.title = 'My Search Script';
            $('#results').hide();
        }
        loadurl();
    });

});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜