jquery 自动完成无法与 django 一起正常工作答案

【问题标题】：jquery autocomplete not working correctly with djangojquery 自动完成无法与 django 一起正常工作
【发布时间】：2014-11-20 04:52:52
【问题描述】：

我想使用 django 在我的网页上实现自动完成功能。我继续使用 jquery autocomplete，它有足够的文档说明如何实现它。我也对我的 django 视图和 url 进行了相应的更改。我仍然无法在自动完成中查看任何条目。

下面是代码片段，可以清楚地了解我是如何实现它的

mypage.html

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

...
...

<script>
$(function() {
var entries= [
  "emp1",
  "emp2",
  "emp3",
  "emp4",
  "emp5"
];
$("#vote").autocomplete({
  source: "api/get_employees/",
});
});
</script>

...
...
...

<div class="ui-widget">
<input id="vote" type="text" name="vote"/>
<input type="submit" value="Vote" />
</div>

urls.py

url(r'^api/get_employees/', views.get_employees, name='get_employees')

views.py

def get_employees(request):
    data = ['MyName']
    return HttpResponse(json.dumps(data),'application/json')

我也尝试将 [{id:'MyName'}] 传递给数据。但在自动完成期间我仍然没有得到它。我确信 jquery 部分没有任何问题，因为如果我将条目变量传递给源，一切正常。只有当我更改它以从 django 视图获取数据时，它才会遇到问题。这方面的任何指示都会有所帮助。我在stackoverflow中尝试过其他帖子，但无济于事。

【问题讨论】：

用inspect element(chrome)或firebug(firefox)检查你的ajax调用并检查是否有任何错误

标签： jquery python django autocomplete

【解决方案1】：

您的 JSON 应如下所示：

[
    {
    "id":"Ficedula hypoleuca",
    "label":"Eurasian Pied Flycatcher",
    "value":"Eurasian Pied Flycatcher"
    },
    {
    "id":"Muscicapa striata",
    "label":"Spotted Flycatcher",
    "value":"Spotted Flycatcher"
    }
]

当您查看http://jqueryui.com/autocomplete/#multiple-remote 的示例时，您会看到自动完成功能正在“询问”http://jqueryui.com/resources/demos/autocomplete/search.php

您还应该使用/api/get_employees/ 而不是api/get_employees/

也许这也是重要的（对于您的 django 部分）： jquery 使用参数 term 来作为搜索词。例如 http://jqueryui.com/resources/demos/autocomplete/search.php?term=ca 正在搜索“ca”

【讨论】：

【解决方案2】：

自动完成文档不是很清楚。要使其正常工作，您需要确保 api/get_employees?term=... 将返回一个 JSON 数组，其结构如下：

[ {"value":"3","label":"Matching employee A"},
  {"value":"5","label":"Matching employee B"},
  etc.
]

【讨论】：

【解决方案3】：

首先感谢所有的答案。他们帮助我形成正确的 json 以传回。但后来我发现我错过了“import json”这一行。即使没有我一无所知的这条线，一切都运行良好。再次感谢任何指针。

在导入并传回正确的 json 后，我可以看到带有自动完成功能的条目列表。

【讨论】：