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); 
    }, 
});