在Django項目中的typeahead.js

https://twitter.github.io/typeahead.js/examples/ 上有例子我需要在我的django應用程序中爲搜索標籤做類似的事情。但我試過了，它不起作用。還有一個類似的問題，並在stackoverflow得到ansewred，但我不明白如何做到這一點。 Using typeahead.js in Django project 在Django項目中的typeahead.js

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/ 上，我不明白這是什麼問題

來源

2017-08-09 Олег

這對於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() 
});

來源

2017-08-09 14:43:57

在Django項目中的typeahead.js

回答

相關問題