时间戳

首页 > 解决方案 > 使用 ajax 和 django 搜索数据并重定向到相关页面

django - 使用 ajax 和 django 搜索数据并重定向到相关页面

问题描述

我正在建立一个网站，我想实现搜索。我希望用户输入一些文本并希望使用 ajax 显示建议。当用户点击特定产品或类别时，我想将用户重定向到相关页面。这是我到目前为止所做的：

$(function () {
        $("#search").autocomplete({
            source: "{% url 'ajax-search' %}",
            select: function (event, ui) { //item selected
                AutoCompleteSelectHandler(event, ui)
            },
            minLength: 5,
        });
    });
<div class="search">
    <label for="search"></label>
    <input type="text" oninput="" style="height: 36px"      class="searchTerm" placeholder="What are you looking for?"  name="searchtext" id="search">
    <button type="submit" class="searchButton">
     <i class="fa fa-search"></i>
     </button>
</div>

path('ajax/search', views.autocompleteModel, name='ajax-search'),

def autocompleteModel(request):
if request.is_ajax():
    q = request.GET.get('term', '')
    lookups = Q(name__icontains=q) | Q(category__name__icontains=q)
    products = Product.objects.filter(lookups).distinct()
    results = []
    for product in products:
        place_json = {}
        place_json = product.name
        product_url = 'prodcuts/product/' + str(product.id)
        results.append(place_json)
    data = json.dumps(results)
else:
    data = 'fail'
mimetype = 'application/json'
return HttpResponse(data, mimetype)

标签： djangoajaxsearch

解决方案

在您的 javascript 部分中，您必须执行以下操作：

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

Python 代码部分应如下所示：

results = []
for product in products:
  item = dict(
    label = product.name,
    value = '/products/product/' + str(product.id)
  )
  results.append(item)
data = json.dumps(results)

推荐阅读