django 자동완성 구현하기 django-autocomplete-light

django 자동완성 구현하기 django-autocomplete-light

django-autocomplete-light 설치

---

documentation http://django-autocomplete-light.readthedocs.io/en/master/

타이틀이나 태그 등 입력시 텍스트를 자동 완성해주는 django 패키지 django-autocomplete-light 3.2.1 를 설치해보자.

DAL(django-autocomplete-light)는 Python 2.7, 3.4, Django 1.8+ 이상에서 작동하며, 태그입력시 적용할려면 django-taggit 이 먼저 설치되어 있어야 한다.

다음과 같이 설치한다.

# pip install django-autocomplete-light
Collecting django-autocomplete-light
  Downloading django-autocomplete-light-3.2.1.tar.gz (400kB)
    100% |████████████████████████████████| 409kB 964kB/s
Building wheels for collected packages: django-autocomplete-light
  Running setup.py bdist_wheel for django-autocomplete-light ... done
  Stored in directory: /root/.cache/pip/wheels/9b/59/aa/1a391fdda5f72c7d1708454e4a800fd12099e47deee0cd7575
Successfully built django-autocomplete-light
Installing collected packages: django-autocomplete-light
Successfully installed django-autocomplete-light-3.2.1

INSTALLED_APPS 설정시 반드시 django.contrib.admin 와 grappelli 앞에 넣어야 한다(grappelli 앱이 물론 설치된 경우이다). admin에서 제공하는 django.jQuery에서만 jQuery가 작동하도록 하는 jquery.init.js 스크립트를 덮어씌우기 위해서다.

# Application definition
 
INSTALLED_APPS = [
    'dal',
    'dal_select2',
    'django.contrib.admin',
]

django-taggit’s TaggableManager 용 DAL 구성하기

---

documentation http://django-autocomplete-light.readthedocs.io/en/master/taggit.html

그러면 앞서 언급한 django-taggit 의 TaggableManager 에서 사용할 수 있는 태그 autocompletion 기능을 구현해보자.

models.py

기존의 django-taggit 구성 그대로 두면 된다. 다음과 같다.

# -*- coding: utf-8 -*- 
from django.contrib.auth.models import User
from django.db import models
 
from taggit.managers import TaggableManager
 
class Questions(TimeStampedModel):
    userid = models.ForeignKey(User, related_name='user_question')
    title = models.CharField(max_length=200)
    body = models.TextField()
    tags = TaggableManager()
 
    def __str__(self):
        return self.title

views.py

from dal import autocomplete
from taggit.models import Tag
 
class TagAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        # Don't forget to filter out results depending on the visitor !
        if not self.request.user.is_authenticated():
            return Tag.objects.none()
 
        qs = Tag.objects.all()
 
        if self.q:
            qs = qs.filter(name__istartswith=self.q)
 
        return qs

urls.py

autocomplete view 를 등록한다. 아래와 같이 url 을 추가시킨 후 제대로 작동하는지 확인한다.

from vikander.views import TagAutocomplete
 
urlpatterns = [
    url(r'^tag-autocomplete/$', TagAutocomplete.as_view(), name='tag-autocomplete',),    
]

# python manage.py shell
Python 3.5.2 |Anaconda custom (64-bit)| (default, Jul  2 2016, 17:53:06)
[GCC 4.4.7 20120313 (Red Hat 4.4.7-1)] on linux
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>> from django.core.urlresolvers import reverse
>>> reverse('tag-autocomplete')
'/tag-autocomplete/'

forms.py

from dal import autocomplete
 
class QuestionCreationForm(forms.ModelForm):
    class Meta:
        model = Questions
        fields = ('title','body','userid','tags', )
        widgets = {
                    'tags': autocomplete.TagSelect2(url='tag-autocomplete', attrs={'size': 80 , 'class': 'form-control focused', 'placeholder': 'at least one tag such as (python, django)'}),
                }
 
    def save(self, commit=True):
        question = super(QuestionCreationForm, self).save(commit=False)
        if commit:
            question.save()
        return question

<div class="form-group">
    <label>Tags</label>
    <div class="controls">
        {{ form.tags }}
    </div>
</div>
 
<script src="{% static 'assets/js/jquery-2.1.0.min.js' %}"></script>
{{ form.media }}

적용된 모습이다. 위젯의 형태는 아래 옵션을 참고하여 환경에 맞게 구성한다. 아래는 TagSelect2 를 선택한 경우이다.

       widgets = {
                    'tags': autocomplete.TagSelect2(url='tag-autocomplete'),
                }

http://django-autocomplete-light.readthedocs.io/en/master/api.html#id8