php - 选项卡式 jQuery 搜索结果

Question

我有一个 Google Instant 风格的 jQuery 搜索脚本，它查询一个 PHP 文件，然后将结果解析为一个 HTML div。它使用选项卡让用户定义他们想要使用的搜索类型。当用户搜索时，会创建一个类似 #type/query/的 URL。

我的问题是，当用户搜索某些内容然后选择新的搜索类型(单击选项卡)时，他们必须转到文本框并按回车键再次提交他们的查询。我怎样才能做到这一点，当搜索处于事件状态并单击选项卡时，它会立即加载结果？

希望您能理解我要描述的内容。 JSfiddle:http://jsfiddle.net/phWSR/

我当前的 jQuery 代码是:

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

我当前的 HTML 代码是:

<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>

Answer 1

您可以将 ajax 调用的代码(目前在 $('input').keyup() 中)隔离在一个单独的函数中，并将其绑定(bind)到 $('input ').keyup() 和 $('#nav a').click().