Question

我有一个jQuery搜索脚本，它使用标签让用户定义他们想要使用的搜索类型。当用户搜索时，会创建一个类似＃类型 / 查询 /的网址。但是，当您重新加载页面时，单击转到其他页面的结果或从上一页返回的搜索结果不再存在。为什么会这样，我该如何解决这个问题呢？我也不想使用任何插件。

我的jQuery代码是：

$(document).ready(function () {
    $('[id^=type_]').click(function () {
        type = this.id.replace('type_', '');
        $('[id^=type_]').removeClass('selected');
        $('#type_' + type).addClass('selected');
        return false;
    });
    $('#type_search').click();
    $('#query').keyup(function () {
        var query = $(this).val();
        var url = '/' + type + '/' + query + '/';
        window.location.hash = '' + type + '/' + query + '/';
        document.title = $(this).val() + ' - My Search';
        $('#results').show();
        if (query == '') {
            window.location.hash = '';
            document.title = 'My Search';
            $('#results').hide();
        }
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function (results) {
                $('#results').html(results);
            }
        });
    });
    var textlength = $('#query').val().length;
    if (textlength <= 0) {
        $('#query').focus();
    } else {
        $('#query').blur();
    }
});

Answer 1

重新加载页面时，缺少结果的原因是因为它们不在文档源中;它们之后被添加到DOM中。

我认为你有两个选择，第一个我通常使用。

执行搜索时，请将搜索条件或搜索结果存储在服务器中，以便在下次呈现页面时，使用它呈现结果。我使用ASP.NET MVC 3并使用PartialView执行此操作。当我使用jQuery执行搜索时，它会导致服务器呈现相同的PartialView并将生成的HTML片段插入到结果div中。

或者，您需要在重新加载页面时再次触发jQuery搜索。

重新提交搜索或缓存结果是否更好取决于搜索的费用以及结果集可能有多大。

Answer 2

哈希应该在重新加载页面后保留，因为它是浏览器历史记录的一部分。因此，您可以解析document.location.hash以获取有关所选查询类型和搜索的知识。

//$(function() {
    if(document.location.hash) {
        var hash = document.location.hash;
        var split = hash.split('/');
        var queryType = hash[1];
        var searchTerm = hash[2];
        $('#type_'+queryType).addClass('selected');
        $('#query').text(searchTerm);
        $('#query').keyup();
    }
//});

在您的设置例程后面。

使用URL中的jQuery加载动态div内容

2 个答案: