Question

我有一个Google Instant风格的jQuery搜索脚本，该脚本使用标签让用户定义他们想要使用的搜索类型。但是，当用户搜索某些内容然后选择新的搜索类型（点击标签页）时，他们必须转到文本框并按Enter键再次提交查询。

建议我在点击其中一个标签时调用loadurl()功能但是如何执行此操作并为正确的标签加载正确的内容？我希望你能理解我想要描述的内容。

我目前的jQuery代码是：

$(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 Search Script';
        $('results').show();
        if (query == '') {
            window.location.hash = '';
            document.title = 'My Search Script';
            $('results').hide();
        }
        loadurl();
    });
});

我目前的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

每当选择任何标签时触发input框keyup事件。如果您需要，还可以检查当前选择的选项卡是否被单击，不要做任何事情只返回。

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

});

在选项卡上单击调用jQuery函数

1 个答案: