[Fixed]-Django autocomplete from query db

by

1👍

✅

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.

👤Rieljun Liguid

Leave a comment