Django 项目中的 typeahead.js答案

【问题标题】：typeahead.js in Django projectDjango 项目中的 typeahead.js
【发布时间】：2017-08-09 10:30:05
【问题描述】：

https://twitter.github.io/typeahead.js/examples/上有例子我需要在我的 django 应用程序中做类似的事情来搜索主题标签。但我试过了，它不起作用。有一个类似的问题并在stackoverflow上得到了回答，但我不知道该怎么做。 Using typeahead.js in Django project

views.py

class SearchTag(View):
""" Search tags with autocomplete (live search) """

def get(self, request):
    form = SearchTagForm()
    context = {'searchtag' : form}
    return render(request, 'search_tags.html', context)

def post(self,request):
    q = request.POST['q']
    form = SearchTagForm()
    tags = HashTag.objects.filter(name__icontains=q)
    context = {'tags' : tags, 'searchtag' : form}
    return render(request, 'search_tags.html', context)

class TagJson(View):
    """Search a hashTag with auto complete feature"""
    def get(self, request):
        q = request.GET.get('q','')
        taglist = []
        tags = HashTag.objects.filter(name__icontains=q)
        for tag in tags:
            new = {'q' : tag.name}
            taglist.append(new)
        return HttpResponse(json.dumps(taglist), content_type="application/json")

models.py

class HashTag(models.Model):
''' HashTag model '''
name = models.CharField(max_length = 100, unique = True)
post = models.ManyToManyField(Post)

def __str__(self):
    return self.name

forms.py

class SearchTagForm(forms.Form):
    q = forms.CharField(widget=forms.TextInput(attrs={
        'size' : 30,
        'class' : 'form-control search-tag-query typeahead',
        'id' : 'typeahead'
    }))

在 html 中是这样的

<input type="text" name="q" size="30" class="form-control search-tag-query typeahead" id="typeahead" required="">

我连接了 typahead.bundle.js 和一个文件 search_tag.js search_tag.js

var hashTags = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '/hashtag.json?q=%QUERY',
  remote: {
    url: '/hashtag.json?q=%QUERY',
    wildcard: '%QUERY'
  }
});

$('#typeahead').typeahead(null, {
  name: 'hashTags',
  display: 'value',
  source: hashTags
});

urls.py

    url(r'^hashtag.json$', TagJson.as_view(), name = 'tagjson')

如果我去http://127.0.0.1:8000/hashtag.json?q=h 我得到 [{"q": "#hashtag"}, {"q": "#hashtags"}]

在我的浏览器开发者控制台中，我输入了每个键。

jquery-3.2.1.min.js:4 XHR 完成加载：GET "http://127.0.0.1:8000/hashtag.json?q=h"。

jquery-3.2.1.min.js:4 XHR 完成加载：GET "http://127.0.0.1:8000/hashtag.json?q=ha"。

可能一切正常。但是预输入仍然不起作用，所以我可以在此页面上的示例中看到它https://twitter.github.io/typeahead.js/examples/ 我不明白这是什么问题

【问题讨论】：

标签： javascript jquery django typeahead.js

【解决方案1】：

search_tag.js 的这段代码根据我上面的所有其他代码使一切正常工作。这是我写的一个视频，如何连接 typeahead.js，但它是我的母语俄语：https://www.youtube.com/watch?v=lwOHnWSCYFc 如果你有同样的问题，一定要检查我的 search_tag.js 和这个的区别，你会看到你需要改变什么。

var hashTags = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('q'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '/hashtag.json?q=%QUERY',
  remote: {
    url: '/hashtag.json?q=%QUERY',
    wildcard: '%QUERY'
  }
});

$('#typeahead').typeahead(null, {
  name: 'hashTags',
  displayKey: 'q',
  source: hashTags.ttAdapter()
});

【讨论】：