来自 db 的 Django 自动完成

Question

我有一个这样的模型：

class Baslik(models.Model):
    user = models.ForeignKey(User, null=True, blank=True)
    title = models.CharField(max_length=50)
    timestamp = models.DateTimeField(auto_now_add=True, auto_now=False)
    updated = models.DateTimeField(auto_now_add=False, auto_now=True)
    active = models.BooleanField(default=True)

我想根据这个模型的标题字段自动完成模板中的输入。我只想自动完成标题，其他任何东西都不适合我吗？我认为应该使用 jquery、ajax 等来完成。我对它们一无所知。 有没有办法做到这一点？有没有完全相同的包？ 谢谢。

Answer 1

我使用 bootstrap 的 typeahead 插件，它的 Bloodhound 引擎让您可以使用远程资源。 文档和示例here.

您必须编写一个 JSON 响应视图来处理由 typeahead 发出的请求

js 代码所需的编辑： 您可以使用以下内容：

var source = new Bloodhound({
    hint: false,
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('description'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: YOUR_JSON_VIEW_URL + '&query=%QUERY'
    });

    source.initialize();

这将初始化指向您的 JSON 视图的源。请注意，无论用户输入什么类型，Bloodhound 都会填充 %QUERY 参数。

之后，我们需要告诉 typeahead 使用这个来源：

$(typeahead_input).typeahead(null, {
        name: 'some_name',
        displayKey: 'description',
        source: source.ttAdapter() }

注意我指定的 displayKey，这是 typeahead 显示的属性，现在，在视图上：

我们会有类似的东西：

from django.views.generic import View

class MyJsonView(View):

    def get(self, request):
        context = []
        querystring = request.GET.get('query', None)
        if querystring:
            instances = MyModel.objets.filter(somefield__icontains=querystring)
            for ins in instances:
                 context.append({'id': ins.id, 'description' ins.display_field})
        json_context = json.dumps(context)
        return HttpResponse(json_context, {'content_type': 'application/json'})

Answer 2

ui-autocomplete-input 非常适合这个。

在模板中生成列表

<script>
$(function() {
var availableTitles = [
   {% for baslik in basliks %}
      "{{ baslik.title}}" {% if not forloop.last %},{% endfor %}   
   {% endfor %}

];
$( "#tags" ).autocomplete({
  source: availableTitles
});
});
</script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

EDIT（基于 cmets）：添加了 json 响应；这在 ui-autocomplete 和 bootstrap/typeahead.js 解决方案中都是需要的

import json

from django.http import HttpResponse

def json_response_view(request):
   q = request.GET.get('q', '')
   response_data = Baslik.objects.filter(title__startswith=q).values("title")
   return HttpResponse(json.dumps(response_data), content_type="application/json")