开发者

Tabbed jQuery search results

I have a Google Instant style jQuery search script that queries a PHP file then parses the results into an HTML div. It uses tabs for the user to define which search type they want to use. When a user searches, a URL is created which is something like #type/query/.

My problem is, 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. How can I make it so when a search is active and a tab is clicked that it loads the results straight away instead?

I hope you can understand what I'm trying to describe. JSfiddle: http://jsfiddle.net/phWSR/

My current jQuery code is:

$(document).ready(function () {
    $('[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 Search Script';
        $('#results').show();
        if (query == '') {
            window.location.hash = '';
            document.title = 'My Search Script';
            $('#results').hide();
        }
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function (results) {
                $('#results').html(results);
            }
        });
    });
});

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>


You could isolate the code for the ajax call (currently in $('input').keyup()) in a separate function, and bind it to both $('input').keyup() and $('#nav a').click().

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜