Django和AJAX - 我做錯了什麼？

Question

我想寫一個簡單的搜索服務器，使用Django和AJAX。 服務器本身工作正常，但我仍然努力向搜索小部件添加自動完成功能。

（我不想使用可用的Django片段，因爲它們並不完全符合我的要求，很難自定義，也沒有教會從頭開始編寫接口的基礎知識）

在客戶端（Javascript）方面，我使用的YUI，因爲它看起來更簡單 - 但不介意切換到jQuery，所以請不要注意這一點。

在YUI中，一個自動完成框有三個參數：input，container和dataSource。 前兩個只是小部件，第三個很有趣。

如果我寫：

var oDS = new YAHOO.util.LocalDataSource(["apples","apples2", "broccoli", "cherries"]); 
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS); 

在我<script>，我得到它自動填充這些術語的自動完成框。

當我嘗試用遠程數據源替換LocalDataSource時，例如通過選擇var oDS = new YAHOO.util.ScriptNodeDataSource("127.0.0.1:8000/getNames/")並設置合適的視圖，則不會發生自動完成。

我所瞭解的問題：

1. 我知道的觀點被調用（通過調試印刷） - 所以這不是問題。
2. 我通過jresponse = simplejson.dumps(response_array); return HttpResponse(jresponse, mimetype='application/javascript'); 返回一個json數組我不認爲有任何問題，因爲我可以直接訪問該視圖並獲取json的文本表示形式。
3. 也許本地數據源期望的輸入類型有問題 - 我不知道如何設置它。

任何幫助（包括如何在jQuery中正確做到這一點 - 我不介意傾銷YUI）將不勝感激。

---

編輯：在前兩個評論（謝謝！）後，我安裝了螢火蟲，並開始玩它。但是，這真的很麻煩，因爲雅虎工具欄有很多代碼，我不知道該在哪裏打破它。有沒有簡單的方法讓螢火蟲只向我展示json/xml元素？

@Marat：我已經做了（訪問我的視圖），它返回JSON的字符串表示（至少這是我的瀏覽器顯示）。這是我應該期待的嗎？

@pastylegs：下面的代碼：

<div id="myAutoComplete"> 
    <input id="myInput" type="text"> 
    <div id="myContainer"></div> 
    </br></br> 
    <input type="submit"> 
</div> 

<script type="text/javascript"> 
YAHOO.example.BasicLocal = function() { 
{%block oDS%} 
// Use a LocalDataSource 
var oDS = new YAHOO.util.LocalDataSource(["apples","apples2", "broccoli", cherries"]); 
//for remote - oDS = new YAHOO.util.ScriptNodeDataSource("127.0.0.1:8000/getNames/") 


// Instantiate the AutoComplete 
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS); 
oAC.prehighlightClassName = "yui-ac-prehighlight"; 
oAC.useShadow = true; 

return { 
    oDS: oDS, 
    oAC: oAC 
}; 
}(); 
</script> 

Django的觀點：

def getNamesXML(request): 
    response_array=['Apples','Oranges'] 
    print response_array 
    jresponse = simplejson.dumps(response_array) 
    print jresponse 
    return HttpResponse(jresponse, mimetype='application/javascript') 

非常感謝！

Answer 1

我對YUI一無所知，但我可以給你一個可用的jQuery示例。我在代碼中看到的主要區別是mimetype：如this question中所述，您應該使用application/json。這就是說，我認爲這不會產生很大的影響。

對於視圖中，使用這些方針的東西：

def autosuggest(request): 
    query = request.GET.get('term') # jQuery autosuggest input so far 
    f = MyModel.objects.filter(name__icontains=query) 
    response = [p[0] for p in f.order_by("name")[:10].values_list("name")] 
    return HttpResponse(simplejson.dumps(response), mimetype="application/json") 

這是假定f是對具有name領域的典範一個QuerySet，你想第一個10場比賽。在你的模板中，應該做以下事情：

$('#myInput').autocomplete({ 
    source: '{% url myapp.views.autosuggest %}', 
    minLength: 2, // Two characters are needed before suggestions show 
    select: function(event, ui) { // Callback function for selection 
     $('#myInput').val(ui.item.value); 
    }, 
});