Question

我正在与Django合作开发一个餐厅管理系统的项目。我想使用自动完成功能在桌子上下订单。据我了解，JQueryUI函数autocomplete()是我所需要的。但是我似乎无法使其正常工作。

以下是我的页面HTML代码。它的工作方式是，一旦插入了聚会中的人数，Javascrip脚本就会在表格中插入相同数量的表单输入字段。

addOrder.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文件

urls.py

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"),
]

views.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调用并检索可能的菜单的功能

autocompleteMenu.js

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

您可能会从getMenus()中的views.py函数中看到，我还打印了一条检查线（“我被称为”），这肯定不会在控制台上打印出来。同样，即使将autocomplete() source参数切换到本地数组，也没有结果。

我确实觉得自己犯了一些非常幼稚的错误，但是我似乎无法弄清楚（我对JQuery还是很陌生）。

我认为该错误应该在提供的文件中，但是为了以防万一，我很乐意发布修改内容

提前谢谢！

Answer 1

我意识到问题出在我必须将自动完成功能绑定到新创建的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;
                }
            }
        }
    });
});

views.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)

使用Django的JQueryUI自动完成搜索不起作用

1 个答案: