Question

我想使用django在我的网页上实现自动完成功能。我继续使用jquery autocomplete，它有足够的文档来说明如何实现它。我已经根据我的django观点和网址进行了相应的更改。我仍然无法查看自动填充中的任何条目。

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

的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中尝试了其他帖子，但无济于事。

Answer 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/

也许这也是importend（对于你的django-part）： jquery使用参数term来表示搜索词。例如http://jqueryui.com/resources/demos/autocomplete/search.php？ term = ca 正在搜索“ca”

Answer 2

自动填充文档不是很清楚。为了使其工作，您需要确保api/get_employees?term=...将返回如此结构的JSON数组：

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

Answer 3

首先感谢所有答案。他们帮助我形成了正确的json传回来。但后来我发现我错过了一条线＆＃34;导入json＆＃34;。即使没有我无能为力的这条线，一切都很好。再次提出任何指示。

执行导入并将正确的json传回后，我能够看到具有自动完成功能的条目列表。

jquery自动完成功能与django无法正常工作

3 个答案: