Метка: autocomplite

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

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

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

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

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

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

    indicator.gif
    jquery.autocomplete.cssCode language: HTML, XML (xml)

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

    jquery-1.5.min.js
    jquery.autocomplete.min.jsCode language: HTML, XML (xml)

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

    (r'^asearch/$', 'man.views.ajax_search'),Code language: Python (python)

    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") 
     Code language: Python (python)

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

    if request.is_ajax():
    q = request.GET.get( 'q' )Code language: Python (python)

    Но об этом попробую ещё написать, когда буду более тонко в этом разбираться
    В модели 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">Code language: HTML, XML (xml)

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

    <script type="text/javascript">
       $(document).ready(function() {  
           $("#q1").autocomplete("/asearch/");  
        });  
    </script>Code language: HTML, XML (xml)

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

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

    <input id="q1" type="text" />Code language: HTML, XML (xml)

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