Hello guys and welcome back, this night i want to share a simply tutorial how to Implement Realtime Search using Django and Ajax. Lets goo… ^_^

1. yourapp/models.py

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()

2. yourapp/views.py 

from django.shortcuts import render
from django.db.models import Q
from yourapp.models import Post

def homepage(request):
    posts = Post.objects.all()
    return render(
        request, 'yourapp/search.html',
        {'posts': posts}
    )

def search(request):
    query = request.GET.get('q')
    if query is not None and query != '' and request.is_ajax():
        posts = Post.objects.filter(  
            Q(title__icontains=query)
        )

        # you also can limit the maximum of `posts` here.
        # eg: posts[:50]
        return render(
            request, 'yourapp/snippets/search.html',
            {'posts': posts}  
        )
    return render(
        request, 'yourapp/snippets/search.html'  
    )

3. yourapp/urls.py 

from django.conf.urls import url

from yourapp.views import (homepage, search)

urlpatterns = [
    url(r'^$', homepage, name='homepage'),
    url(r'^search/$', search, name='search'),
]

4. ../templates/yourapp/snippets/search.html 

<ul id="results-search">
  {% for post in posts %}  
  <li><a href="#">{{ post.title }}</a></li>
  {% endfor %}
</ul>

5. ../templates/yourapp/homepage.html

<!DOCTYPE html>  
<html>
<head>
  <title>Homepage</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <h1>All Posts</h1>
  <ul>
    {% for post in posts %}  
      <li><a href="#">{{ post.title }}</a></li>
    {% endfor %}
  </ul>
  <hr />
   <h1>Posts by Query</h1>
   <input id="search-input" type="text" placeholder="Type to search posts..."/>
   <div id="main-results-search"></div>
</body>

<footer>
  <script type="text/javascript">
    // Implement realtime search with `keyup` function.

    $('#search-input').keyup(function (event) {
      var query =($('#search-input").val());

      if (query != '' || query != ' ') {  
        $.ajax({
           type: 'GET',
           url: '{% url "search" %}',
           data: {
             'csrfmiddlewaretoken': '{{ csrf_token }}',
             'q': query
           },
           success: function(data) {
              $('#main-results-search').html(data);
           },
           error: function(data) {
              console.log(data);
           }
         });
      }
    });

    // Removing the element after search
    // and when user clicked another/outside of this element below.

    $(document).click(function(event) {
      $is_inside = $(event.target).closest('#main-results-search').length;

      if( event.target.id == 'search-input' || $is_inside ) {
        return;
      }else {
        $('#results-search').remove();
      }
    });
  </script>
</footer>

Simple right? ^_^, any question? please comment below.. :D

python ajax django tricks
Facebook Twitter Linkedin
agaust
102 1 1 0