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

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>

编辑（基于评论）：添加了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")

Answer 2

我使用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'})

Django从db自动完成

2 个答案: