Django JQuery 自动完成功能不起作用 - 没有显示，但 API URL 有效
Posted
技术标签:
【中文标题】Django JQuery 自动完成功能不起作用 - 没有显示，但 API URL 有效【英文标题】：Django JQuery autocomplete not working - nothing showing up, but API URL works 【发布时间】：2021-09-20 18:51:26 【问题描述】：我已尝试完全按照本教程所示实现自动完成功能：https://www.youtube.com/watch?v=-oLVZp1NQVE
这里是教程代码，和我这里的很相似：https://github.com/akjasim/cb_dj_autocomplete
但是，它对我不起作用。 API url 有效，但该字段中没有填充任何内容，即没有显示自动完成功能。我可能做错了什么？我正在使用 yarn 和 yarn build 并收集了静电，但仍然无法正常工作。
这里是 jquery：
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function ()
$("#product").autocomplete(
source: '% url 'autocomplete' %',
minLength: 2
);
);
</script>
这里是html：
<title>Autocomplete</title>
</head>
<body>
<form>
<label for="product">Product</label>
<input type="text" name="product" id="product">
</form>
以下是观点：
def autocomplete(request):
if 'term' in request.GET:
qs = Model.objects.filter(title__icontains=request.GET.get('term'))
titles = list()
for product in qs:
titles.append(product.title)
# titles = [product.title for product in qs]
return JsonResponse(titles, safe=False)
return render(request, 'file_for_viewing.html')
那么这里是网址：
path('autocomplete',views.autocomplete, name='autocomplete'),
即使源是列表，自动完成功能也不起作用：
source: '['chicago', 'new york',...,'']
所以错误是请求被取消，因为XMLHttpRequest cannot load XXX due to access control checks.
【问题讨论】：
为什么不使用 JQuery 的默认自动完成功能？它就像一个魅力，你已经在加载 JQuery 库。 jqueryui.com/autocomplete 能否在网络选项卡中发布浏览器检查工具的屏幕截图，关于 ajax 请求 【参考方案1】：我尝试了您的代码，经过一些更正后它运行良好。我没有遇到访问控制标头的任何问题。如果您没有更改代码，我所做的更改就是。
模型就是产品
qs = Product.objects.filter(title__icontains=request.GET.get('term'))
当使用列表作为源进行测试时，源应该是一个数组..
source: ['chicago', 'new york',]
如果您仍然面临访问控制问题。设置 django-cors-headers。
*** 上已经有很多关于设置 django-cors-headers 的答案..
Django-cors-headers
How can I enable CORS on Django REST Framework
【讨论】：
以上是关于Django JQuery 自动完成功能不起作用 - 没有显示，但 API URL 有效的主要内容，如果未能解决你的问题，请参考以下文章
为啥使用 jQuery 和 PHP 的多项选择自动完成功能不起作用？