我的ajax搜索框在djang中不起作用

2024-09-23 00:25:38 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在开发一个项目与django,是一个电子商务商店。我想实现一个搜索框来搜索上面的产品

我已经用ajax开发了,但目前我正在搜索一个产品。它向我展示了我所有的产品,而不仅仅是我想要的产品

这是我对搜索栏的看法:

def searchBar(request, option):

    busqueda = request.POST.get('busqueda', '')
    categoria = Clasificacion.objects.filter(existencia=True)
    items = Articulo.objects.filter(nombre_producto__icontains = busqueda)
    contexto = {
        'items':items,
        'categoria':categoria,
    }
    return render(request, 'adminview/article.html', contexto)

这是html,表单调用视图:

<form action="{% url 'adminview:searchBar' option=1 %}" method="get" class="d-none d-sm-inline-block form-inline mr-auto ml-md-0 my-2 my-md-20 navbar-search">
            <div class="input-group">
              <input type="text" id="busqueda" class="form-control bg-light border-1 small" placeholder="Buscar producto..." aria-label="Search" aria-describedby="basic-addon2" name="busqueda">
              <div class="input-group-append">
                <button class="btn btn-primary" type="submit">
                  <img src="{% static 'img/search.png'%}"width="20px" height="20px" />
                </button>
              </div>
            </div>
          </form>
   ...
   <script src="{% static 'js/search.js'%}"></script>

我的网址:

url(r'^search/ajax(?P<option>\d+)/$', searchBar, name="searchBar"),
url(r'^buscar/searchAjax/$', searchBar),

这是我从javaScript编写的脚本,如果您需要,可以这样做:

    $(function(){
    $(‘#busqueda’).keyup(function() {
        $.ajax({
            type: “POST”,
            url: “searchAjax/”,
            data: {
                ‘busqueda’: $(‘#busqueda’).val(),
                ‘csrfmiddlewaretoken’: $(“input[name=csrfmiddlewaretoken]”).val()
            },
            success: searchSuccess,
            dataType: ‘html’
        });
    });
});

function searchSuccess(data, textStatus, jqXHR)
{
    $(‘#resultado_busqueda’).html(data);
}

希望你能帮助我,谢谢


Tags: divformurlinputsearch产品requesthtml