Автозаполнение поиска JQueryUI с Django не работает

Я работаю над проектом с 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).

Я думаю, что ошибка должна быть в предоставленных файлах, но я буду рад опубликовать правки на всякий случай

Заранее спасибо!

ajax django jquery-ui autocomplete django-templates

17.07.2018 19:33

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

847

Ответы 1

Я понял, что проблема связана с тем, что мне пришлось привязать автозаполнение к идентификатору вновь созданного идентификатора (который я изменил на классы). Также данные 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)

17.07.2018 22:50

Другие вопросы по теме

Ошибка при развертывании приложения Django на Heroku

Веб-приложение Django с использованием анализа R

Как читать ввод из массивов в django

Django просит определить модель, хотя она уже определена

Уровень изоляции по умолчанию django и ошибка формата двоичного журнала db

Сохранить форму с идентификатором пользователя Django

Вызвать функцию api запроса в views.py с помощью ajax

В модели django я хочу выполнить поиск в таблице списка значений столбцов, которые будут использоваться в качестве вариантов выбора в одном из моих полей. Является ли это возможным?

Избежание циклического импорта в моделях Django (класс Config)

TemplateDoesNotExist base.html

Автозаполнение поиска JQueryUI с Django не работает

Ответы 1

Другие вопросы по теме

Похожие вопросы