使用 Django 的 JQueryUI 自动完成搜索不起作用
Posted
技术标签:
【中文标题】使用 Django 的 JQueryUI 自动完成搜索不起作用【英文标题】：JQueryUI autocomplete search with Django not working 【发布时间】：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 也很陌生）。
我认为错误应该在提供的文件中，但我很乐意发布编辑以防万一
提前谢谢你！
【问题讨论】：
【参考方案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)
【讨论】：
以上是关于使用 Django 的 JQueryUI 自动完成搜索不起作用的主要内容，如果未能解决你的问题，请参考以下文章