typeahead.js 在 Django 项目中

Question

https://twitter.github.io/typeahead.js/examples/上有例子我需要在我的 django 应用程序中做类似的事情来搜索主题标签。但我试过了，但没有用。有一个类似的问题并在 Whosebug 上得到了回答，但我不知道如何去做。

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".

可能一切正常。但是 typeahead 仍然无法正常工作，所以我可以像本页示例中那样看到它 https://twitter.github.io/typeahead.js/examples/ 我不明白这是什么问题

Answer 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()
});

typeahead.js 在 Django 项目中

typeahead.js in Django project

javascript

django

jquery

typeahead.js