代码之家 › 专栏 › 技术社区 › Giacomo Casoni

JQueryUI自动完成搜索,Django不工作

django-templates autocomplete jquery-ui django ajax

Giacomo Casoni · 技术社区 · 7 年前

据我所知JQueryUI函数 autocomplete() 是我需要的。但是我似乎不能让它发挥作用。

以下是我的网页HTML代码。它的工作方式是,一旦在参与方中插入了人数相同的表单输入字段,那么Javascrip脚本就会在表中插入相同数量的表单输入字段。

添加订单.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script type="text/javascript" src={% static "js/jquery-3.3.1.min.js" %}></script>
    <script src={% static "js/jquery-ui.min.js" %}></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src={% static "js/createOrderIn.js" %}> </script>
    <script type="text/javascript" src={% static "js/autocompleteDrink.js" %}></script>
    <script type="text/javascript" src={% static "js/autocompleteMenu.js" %}></script>
    <style>
        .move {
            margin: 30px;
        }
    </style>
    <title>Add Order</title>
</head>
<body>
<div class="move">
    <form action="/orders/addOrder" method="post" id="the-form" class="ui-widget">
        <label> Party of </label>
        <input type="text" id="people">
        <input type="submit" class="btn btn-primary" value="Submit order">
    </form>
</div>
</body>
</html>

这是我用来生成新表单输入字段的脚本

createOrderIn.js

$(document).ready(function () {
    var previous = 0;
    var considered = 0;

    $("#people").keyup(function ( ) {
        var actual = this.value;
        if(actual==null){
            actual=1;
         }
         var toAdd = actual-previous;
         previous = actual;
         if(toAdd > 0){
            for(var i=0; i<toAdd; i++){
                considered+=1;
                var htmlToAdd = $("<div class="+considered+"><input type=\"text\" name=\"menu_"+considered+"\" id=\"menu\"><input type=\"text\" name=\"drink_"+considered+"\" value=\"No drink\" id=\"drink\"><br></div>");
                $("#the-form").append(htmlToAdd);
            }
        }
        else{
            for(var j=0; j<(-1*toAdd); j++) {
                if (considered > 0) {
                    $("."+considered).remove();
                    considered -= 1;
                }
            }
        }
    });
});

下面是相关的Python/Django文件

from django.urls import path

from . import views

urlpatterns = [
    path('', views.ordersIndex, name = "index"),
    path('changeStatus/<int:pk>', views.changeStatus, name="changeStatus"),
    path('addOrder', views.addOrder, name="addOrder"),
    path('addOrderRender', views.addOrderRender, name="addOrderRender"),
    path('getDrinks', views.getDrinks, name="getDrinks"),
    path('getMenus', views.getMenus, name="getMenu"),
]

视图.py(仅功能 getMenus() )

def getMenus(request):
    print("I am called")
    if request.is_ajax():
        q = request.GET.get('term', '')
        menus = Menu.objects.filter(name__contains=q)
        results=[]
        for menu in menus:
            menu_json = {}
            menu_json['name'] = menu.name
            menu_json['n_courses'] = menu.number_of_courses
            menu_json['price'] = menu.price
            results.append(menu_json)
        data = json.dump(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

最后,这个函数应该使用JQueryUI进行ajax调用并检索可能的菜单

自动完成菜单.js

$(function() {
  $("#menu").autocomplete({
    source: "/orders/getMenus/",
  });
});

你可能从函数 views.py 我还打印了一个检查行(“我被呼叫”),这肯定不会在控制台上打印出来。甚至通过切换 source 参数到本地数组没有结果。

我确实觉得我犯了一些很天真的错误,但我真的不知道(我对JQuery也是相当陌生的)。

我认为错误应该在提供的文件,但我会很高兴张贴编辑以防万一

提前谢谢你!

1 回复 | 直到 7 年前

Giacomo Casoni 7 年前

我意识到这个问题是由于我必须将autocomplete绑定到新创建的id的id上(我将其改为类)。此外,JSON数据必须具有 lable json.dumps() ,不是 json.dump() :p)。

createOrderIn.js

$(document).ready(function () {
    var previous = 0;
    var considered = 0;

    $("#people").keyup(function ( ) {
        var actual = this.value;
        if(actual==null){
            actual=1;
         }
         var toAdd = actual-previous;
         previous = actual;
         if(toAdd > 0){
            for(var i=0; i<toAdd; i++){
                considered+=1;
                var htmlToAdd = $("<div class="+considered+"><input type=\"text\" name=\"menu_"+considered+"\" class=\"menu\"><input type=\"text\" name=\"drink_"+considered+"\" value=\"No drink\" class=\"drink\"><br></div>");
                $("#the-form").append(htmlToAdd);
                $('#the-form').find('input[class=menu]:last').autocomplete({
                    source: "/orders/getMenus"
                });
                $('#the-form').find('input[class=drink]:last').autocomplete({
                    source: "/orders/getDrinks"
                });
            }
        }
        else{
            for(var j=0; j<(-1*toAdd); j++) {
                if (considered > 0) {
                    $("."+considered).remove();
                    considered -= 1;
                }
            }
        }
    });
});

视图.py

def getDrinks(request):
    if request.is_ajax():
        q = request.GET.get('term', '')
        drinks = Drink.objects.filter(name__contains=q)
        results=[]
        for drink in drinks:
            drink_json = {}
            drink_json['label'] = drink.name
            results.append(drink_json)
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)


def getMenus(request):
    if request.is_ajax():
        q = request.GET.get('term', '')
        menus = Menu.objects.filter(name__contains=q)
        results=[]
        for menu in menus:
            menu_json = {}
            menu_json['label'] = menu.name
            menu_json['id'] = menu.number_of_courses
            results.append(menu_json)
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)