jquery自动完成无法与django正常工作
我想使用django在我的网页上实现自动完成功能。我继续使用jqueryautocomplete,它有足够的文档说明如何实现它。我也对django视图和URL进行了相应的更改。我仍然无法在自动完成中查看任何条目 下面是一些代码片段,它们将清楚地说明我是如何实现它的 mypage.htmljquery自动完成无法与django正常工作,jquery,python,django,autocomplete,Jquery,Python,Django,Autocomplete,我想使用django在我的网页上实现自动完成功能。我继续使用jqueryautocomplete,它有足够的文档说明如何实现它。我也对django视图和URL进行了相应的更改。我仍然无法在自动完成中查看任何条目 下面是一些代码片段,它们将清楚地说明我是如何实现它的 mypage.html <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <
<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>
views.py
def get_employees(request):
data = ['MyName']
return HttpResponse(json.dumps(data),'application/json')
我也尝试过将[{id:'MyName'}]传递给数据。但在自动完成过程中,我仍然无法得到它。
我确信jquery部分并没有什么问题,因为若我将entries变量传递给源代码,一切都会正常工作。只有当我更改它以从django视图获取数据时,它才会遇到问题。
这方面的任何建议都会有所帮助。我在stackoverflow中尝试了其他帖子,但没有成功。您的JSON应该如下所示:
[
{
"id":"Ficedula hypoleuca",
"label":"Eurasian Pied Flycatcher",
"value":"Eurasian Pied Flycatcher"
},
{
"id":"Muscicapa striata",
"label":"Spotted Flycatcher",
"value":"Spotted Flycatcher"
}
]
当您在查看示例时,可以看到自动完成是“询问”http://jqueryui.com/resources/demos/autocomplete/search.php
您还应该使用/api/get\u employees/
而不是api/get\u employees/
也许这也很重要(对于您的django部分):
jquery使用参数术语为searchword定义参数。
例如?term=ca正在搜索“ca”自动完成文档不是很清楚。要使其正常工作,您需要确保
api/get_employees?term=…
将返回如下结构的JSON数组:
[ {"value":"3","label":"Matching employee A"},
{"value":"5","label":"Matching employee B"},
etc.
]
首先感谢所有的答案。他们帮助我形成正确的json来传递回去。但后来我发现我漏掉了一行“导入json”。即使没有我不知道的这条线,一切都很好。再次感谢任何指点
导入并返回正确的json后,我可以使用autocomplete查看条目列表。使用inspect元素(chrome)或firebug(firefox)检查ajax调用,并检查是否有任何错误
[ {"value":"3","label":"Matching employee A"},
{"value":"5","label":"Matching employee B"},
etc.
]