2014-09-25 80 views
1

我想使用django在我的網頁上實現自動完成功能。我繼續jquery自動完成,它有足夠的文件來說明如何實現它。我也根據我的django觀點和網址做了相應的修改。不過,我無法查看自動填充中的任何條目。jquery自動完成與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但無濟於事。

+0

用inspect元素(chrome)或firebug(firefox)檢查你的ajax調用並檢查是否有錯誤 – ruddra 2014-09-25 12:37:38

回答

0

第一。他們幫助我形成正確的json傳回。但後來我發現我錯過了一行「import json」。即使沒有這條我無能爲力的路線,一切都很好。再次,任何指針讚賞。

在完成導入並將正確的json傳回之後,我可以看到具有自動完成功能的條目列表。

2

你的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部分): jquery使用參數項來搜索詞。 例如http://jqueryui.com/resources/demos/autocomplete/search.phpterm = ca正在搜索'ca'

1

自動完成文檔不是很清楚。爲了使它工作,你需要確保api/get_employees?term=...將返回一個JSON數組結構,像這樣:

一切都要感謝所有的答案
[ {"value":"3","label":"Matching employee A"}, 
    {"value":"5","label":"Matching employee B"}, 
    etc. 
] 
相關問題