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

【问题标题】：JQueryUI autocomplete search with Django not working使用 Django 的 JQueryUI 自动完成搜索不起作用
【发布时间】：2018-12-25 12:04:14
【问题描述】：

我正在使用 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/",
  });
});

正如您可能从views.py 中的getMenus() 函数中看到的那样，我还打印了一个检查行（“我被调用”），这肯定不会在控制台上打印。此外，即使将autocomplete() source 参数切换到本地数组也没有结果。

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

我认为错误应该在提供的文件中，但我很乐意发布编辑以防万一

提前谢谢你！

【问题讨论】：

标签： ajax django jquery-ui autocomplete django-templates

【解决方案1】：

我意识到问题是由于我必须将自动完成绑定到新创建的 id 的 id（我将其更改为 classes）。此外，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)

【讨论】：