CODEWITHSUNDEEP
jquerydjangoautocompletetypeahead.js
lausent
lausent

Reputation: 325

Django autocomplete from query db

I have problem with autocomplete an input field from db query. If I write something in the input field nothing happens. I didn't receive any errors from django prompt or browser console futhermore if I go to for example 127.0.0.0.1:8000/guess_booknames/?q=San it return back a page with JSON content so the "def guess_booknames" works good. Maybe it's wrong the query.html?

models.py:

class EbooksDBProfile(models.Model):

    bookname = models.CharField(max_length=200,blank=False,null=False)

urls.py:

url(r'^guess_booknames/$', guess_booknames,name='autocomplete book names'),

views.py:

def guess_booknames(request):
    if 'q' in request.GET:
        query = request.GET.get('q','')
        ebook_list_bookname=[]
        ebook_dict={}
        ebook_object=EbooksDBProfile.objects.all().filter(bookname__icontains=query)
        for p in ebook_object:
            ebook_list_bookname.append(p.bookname)

        ebook_dict['options']=ebook_list_bookname
        data=json.dumps(ebook_dict)
        return HttpResponse(data, content_type='application/json')
    return HttpResponse()

query.html:

<!DOCTYPE html>
<html>
  <head>
     <script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"></script>
     <script type="text/javascript" src="//netsh.pp.ua/upwork-demo/1/js/typeahead.js"></script>
  </head>
<body>

  <input type="search" name="searched_item" id="searched_item" class="form-control" autocomplete="off" placeholder="Enter book name (eg. Head First Java)" style="max-width: 700px;width: 700px;color: threeddarkshadow;">

  <script>
  $(document).ready(function($) {
  $('#searched_item').typeahead({
      items:12,
        source: function (query, process) {
              return $.get('/guess_booknames/', { query: query }, function (data) {
                return process(data.options);
              });
            },
            minLength:3,
            autoSelect:false,

  highlighter: function (item) {
      var regex = new RegExp( '(' + this.query + ')', 'gi' );
      return item.replace( regex, "<strong style='color:green;' >$1</strong>" );
  },
  });
  })
  </script>

</body>
</html>

Upvotes: 0

Views: 1696

Answers (1)

Rieljun Liguid
Rieljun Liguid

Reputation: 1531

It seems you are using incorrect parameter name. In your javascript part, you are using query while in your view, you are using just q.

# { query: query } should just be { q: query }
return $.get('/guess_booknames/', { query: query }, function (data) {
                return process(data.options);
              });

Update: I think you are using the wrong version of typeahead, if it is alright with you, you can use the latest version. I get it to work in this one:

<!DOCTYPE html>
<html>
  <head>
     <script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"></script>
     <script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js"></script>
  </head>
<body>

    <input type="text" name="searched_item" id="searched_item"  placeholder="Enter book name (eg. Head First Java)" style="max-width: 700px;width: 700px;color: threeddarkshadow;">

    <script>
        $(function () {
            $('#searched_item').typeahead({
                minLength:3,
                highlight: true
            },
            {
                name: 'books',
                source: function (query, syncResults, asyncResults) {
                    $.get('/guess_booknames/', { q: query }, function (data) {
                        asyncResults(data.options);
                    });
                },
                autoSelect:false,
                highlighter: function (item) {
                    var regex = new RegExp( '(' + this.query + ')', 'gi' );
                    return item.replace( regex, "<strong style='color:green;' >$1</strong>" );
                }
            });
       });
    </script>

</body>
</html>

Take note that the <script src for typeahead is different and I have changed some part of your javascript.

Upvotes: 1

Related Questions