Django ajax пример ( django ajax autocomplite)

Продолжаю понемногу разбираться в Django

Дошло до авто заполнения полей, пару дней перечитывал все “Интернеты” о разных вариантах и методах, о готовых примерах и т.п.

И так начнём я воспользовался jQuery плагином Autocomplete
Всё это я брал вот тут
Плагин совсем не полный ищет так себе похоже просто старый.
Поэтому идём и берём самый новый ..

тут оно будет работать без основного jQuery

Но на других страницах проекта, есть более полные версии и более красивые.
Вот их и качаем
Из них нам нужны
в папочку css кидаем

indicator.gif
jquery.autocomplete.css

в папочку js кидаем

jquery-1.5.min.js
jquery.autocomplete.min.js

Поехали, предположим, что у нас есть в urls.py

(r'^asearch/$', 'man.views.ajax_search'),

man.views.ajax_search – я думаю рассказывать не надо, что это своё приложение и Вьюха его

во views.py

def ajax_search(request):
     if request.method == 'GET':  
         GET = request.GET  
         if GET.has_key('q'):
             q = request.GET.get( 'q' )
             search = Task.objects.all()
             results = search.filter(name__contains = q)
             matches = ""
             for result in results:
                 matches = matches + "%s\n" % (result.name)
             return HttpResponse(matches, mimetype="text/plain")

В данном примере мы будет общаться через обычный get запрос.
Можно сделать “не обычным”
например так

if request.is_ajax():
q = request.GET.get( 'q' )

Но об этом попробую ещё написать, когда буду более тонко в этом разбираться
В модели Task мы делаем поиск по полю “name”.
Потом всё это выстраиваем в красивый список с переносами строк
в итоге в переменной matches у нас будет уже структурированный список.

Теперь на стороне клиента.

Во первых подключаем плагин со стилями и jquery

<script src="/static/js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="/static/js/jquery.autocomplete.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/jquery.autocomplete.css">

Добавим простую функцию jQ

<script type="text/javascript">
   $(document).ready(function() {  
       $("#q1").autocomplete("/asearch/");  
    });  
</script>

Тут мы говорим плагину: находим элемент с id=”q1″ и будем с ним работать.
А всё запросы отправлять на урл “/asearch/”

дальше собственно сам элемент

<input id="q1" type="text" />

Вот собственно и всё.

Оставить комментарий


Примечание - Вы можете использовать эти HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">