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/")并设置适当的视图，不会发生自动完成。

我对这个问题的了解：

我知道视图被调用（通过调试打印） - 所以这不是问题。
我通过jresponse = simplejson.dumps(response_array); return HttpResponse(jresponse, mimetype='application/javascript');返回一个json数组我认为没有任何问题，因为我可以直接访问该视图，并在我这样做时获得json的文本表示。
可能是本地数据源所期望的输入类型有问题 - 我不知道如何设置它。

任何帮助（包括如何在jQuery中正确执行此操作 - 我不介意转储YUI）将非常感激。

编辑：在前两个评论之后（谢谢！），我安装了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是具有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);
    },
});

Django和AJAX - 我做错了什么？

1 个答案: