Django에서 jquery-ui 의 autocomplete 사용

꾸준히 Django 관련 글을 올리는 이유 중 하나가 "쉽고 빠른 웹개발 Django"라는 책을 보고 있기 때문이다.
그런데 책이 너무 오래...(2009년도 판인데...) 되어서 그런지 안 맞는 게 너무 많다.

어쨌든, Django에서 자동 추천 기능인 autocomplete를 사용하기 위해서, 이전에는 따로 jquery 플러그인을 사용했지만, 현재는 jquery-ui 라는 추가 프로젝트에 합쳐져서 제공된다.

설치는 소스 파일을 가져다 쓰거나 아니면 패키지를 이용해서 설치하면 된다.

사용 방법은 간단히, jquery-ui 자바스크립트 파일(jquery-ui.min.js 등)과 css 파일(jquery-ui.min.css 등)이 필요하다.
(당연히 jquery 자바스크립트 파일은 포함되어야 한다.)

그리고 사용 방법은 http://jqueryui.com/demos/autocomplete/#default의 View Source에 나와 있듯이, 원하는 input 에 autocomplete 함수를 실행시키면 된다.

이때, 필요한 인자로 객체 값을 받고, 그 객체 내에는 source 값이 필요하다. source가 가져야 할 값으로는 위 문서에 있듯이, 문자열 배열 또는 label과 value를 속성(attribute)로 하는 객체 배열이 필요하다.

그리고 외부 페이지를 통해 값을 가져오는 경우에는 GET 방식으로 term 값에 주어진 입력을 추가하여 보내게 된다. 그리고 리턴되어야 하는 값으로는 JSON 형식으로 값이 리턴되면 된다.

이를 종합하여 책에 있는 내용을 수정하면 아래와 같다.

bookmark_save.html 파일에 추가

<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}jquery-ui/css/smoothness/jquery-ui.min.css" />
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}django_bookmarks/js/tag_autocomplete.js"></script>

tag_autocomplete.js 파일에 추가 (autocompletePage는 페이지를 불러올 url)

$(document).ready(function () {
    $("#id_tags").autocomplete({
        source: autocompletePage
    });
});

views.py 파일에 추가

import json
# 중략...
def ajax_tag_autocomplete(request):
    if request.GET.has_key('term'):
        tags = \
            Tag.objects.filter(name__istartswith=request.GET['term'])[:10]
        return HttpResponse(json.dumps([tag.name for tag in tags]))
    return HttpResponse()

참고자료:
http://stackoverflow.com/questions/5020844/jqueryui-autocomplete-with-url-as-source-am-using-django
http://jqueryui.com/demos/autocomplete/#default