Django 和 AJAX - 我做错了什么？

Question

我正在尝试使用带有 AJAX 的 Django 编写一个简单的搜索服务器。 服务器本身工作正常，但我仍在努力为搜索小部件添加自动完成功能。

（我不想使用可用的 Django sn-ps，因为它们不能完全满足我的需求，难以定制，并且不会像从头开始编写界面那样教我基础知识）

在客户端 (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）将不胜感激。

---

编辑：在前两个 cmets 之后（谢谢！），我安装了 firebug，并开始使用它。然而，它真的很乱，因为雅虎工具栏有很多代码，我不知道在哪里打破它。有没有一些简单的方法让 firebug 只显示 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 是一个模型上的 QuerySet，它有一个 name 字段，并且您想要前 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);
    },
});