0

我一直在尝试将 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>

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

4

2 回答 2

1

我会说使用 Django-autocomplete-light

一开始学习有点棘手，但之后有助于生成自动完成字段 https://github.com/yourlabs/django-autocomplete-light/

于 2013-11-04T08:57:32.103 回答
0

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

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

    服务器端：

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

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

    服务器端：

    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 等时），但这是一个反复试验的事情，您明白了。

于 2013-11-04T10:12:20.577 回答