Question

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

的网址

我的问题是，当用户搜索某些内容然后选择新的搜索类型（点击标签页）时，他们必须转到文本框并按Enter键再次提交查询。当搜索处于活动状态并单击选项卡时，如何直接加载结果，我该怎么做呢？

我希望你能理解我想要描述的内容。 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()中），并将其绑定到$('input').keyup()和$('#nav a').click()。

选项卡式jQuery搜索结果

1 个答案: