Django 的 Javascript 自动完成功能答案

【问题标题】：Javascript Autocomplete Function with DjangoDjango 的 Javascript 自动完成功能
【发布时间】：2013-11-04 08:42:36
【问题描述】：

我一直在尝试将 javascript 自动完成功能与 Django/Python 数组一起使用，但我从未让它正常工作。这是我的模板脚本：

    <script>
       $(function() {
         var availableTags = "{{bandas.ba_nombre}}"
         $( "#tags" ).autocomplete({
           source: availableTags
       });
    });
    </script>

然后我有我的 HTML 输入框<input id="tags" />。

我在一些网站上读到另一种方法是将 Python 数组转储为 JSON，我收到以下错误：Invalid filter: 'jsonify'

这是我实现 JSON 的 Python 代码：

    register = Library()

    def jsonify(object):
      if isinstance(object, QuerySet):
        return mark_safe(serialize('json', object))
      return mark_safe(simplejson.dumps(object))

    register.filter('jsonify', jsonify)
    jsonify.is_safe = True

还有我的脚本：

    <script>
       $(function() {
         var availableTags = jQuery.parseJSON('{{bandas.ba_nombre|jsonify }}');
    alert(availableTags.length);
       $( "#tags" ).autocomplete({
         source: availableTags
       });
    });
    </script>

还有其他方法吗？还是我做错了什么？

【问题讨论】：

标签： javascript jquery python django json

【解决方案1】：

我会说使用 Django-autocomplete-light

一开始学习有点棘手，但后来对自动完成字段的生成有很大帮助 https://github.com/yourlabs/django-autocomplete-light/

【讨论】：

【解决方案2】：

我有一些在 django 旁边使用 jQuery UI 自动完成的经验，并且发现两者结合存在一个普遍的问题。从本质上讲，这是因为您无法发送部分 JSON 的响应，因此您要么返回已经为 jQuery UI 正确格式的 available_tags，要么使用仅返回标签的另一个函数。给你一个这两种方法的例子。

发送已经在服务器端格式化的数据。这是一种蛮力的方式，不是很推荐，但可以很好地满足您的需求：

服务器端：

available_tags = ['example', 1, 2, 'test']
return render_to_response('mytemplate.html', {'available_tags': repr(available_tags) })

客户端：

    $( "#tags" ).autocomplete({
          source: {{ availableTags }} //notice I didn't put '' around it...
       });

使用另一个响应并动态获取它：

服务器端：

def main(request):
    ...
    return render_to_response('mytemplate.html')

def get_tags(request):
    data = {'example': 1, 'code': 2}
    return HttpResponse(json.dumps(data), content_type="application/json")

客户端：

var available_tags = $.get('get_tags/', function(data) { ...parse the json and whatnot... });

当然，第二个选项更推荐，但有时我也使用第一个。您可能需要对其进行更改并以不同的方式使用它（repr 可能会出现问题，尤其是在使用 unicode 等时），但这是一个反复试验的事情，您会明白的。

【讨论】：