Question

我在使用jQuery自动完成功能的导航栏中添加了一个工作搜索字段。问题是它只适用于主页面。在其他页面上，它尝试将源URL添加到页面末尾。

例如，在主页上它指向ajax_call/search，但在公司页面（它是收集公司内部数据的应用程序）上，它指向company/847/ajax_call/search并且明显失败。

我需要做什么才能使jQuery自动完成功能在整个网站上运行（不在每个模板中重写）？

模板

$(function() {
    $("#tags").autocomplete({
        minLength:2,
        source: "ajax_call/search/",
        select: function(event, ui){
            window.location.href = ui.item.href;
        }
    });
});

网址

url(r'^ajax_call/search/$', views.ajax_company_search, name='search-field'),

查看

def ajax_company_search(request):
    if request.is_ajax():
        query = request.GET.get('term', '')
        company_names = Company.objects.filter(company_name__icontains=query).values('company_name', 'pk')

        results = []
        for name in company_names:
            name_json = dict()
            name_json['label'] = name['company_name']
            name_json['value'] = name['company_name']
            name_json['href'] = "company/" + str(name['pk']) + "/"

            results.append(name_json)

        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
return HttpResponse(data, mimetype)

Answer 1

您在JavaScript函数中指定了relative URL。这就是为什么当您访问另一个页面（使用不同的URL）时它会发生变化的原因。在这种情况下，您希望使用绝对URL，如下所示：/ajax_call/search/。

此外，最佳做法是不在模板中对您的网址进行硬编码，而是使用reverse resolution：

$(function() {
    $("#tags").autocomplete({
        minLength:2,
        source: {% url 'search-field' %},
        select: function(event, ui){
            window.location.href = ui.item.href;
        }
    });
});

Django ajax jQuery自动完成仅适用于一个页面

1 个答案: