CODEWITHSUNDEEP
jquerypythonautocompletewebapp2
Stanley Shang
Stanley Shang

Reputation: 21

Jquery Autocomplete with Python and webapp2

Reusing jquery autocomplete: https://jqueryui.com/autocomplete/#remote

I worked in similar way, calling on a remote datasource: this is my code

class Products(webapp2.RequestHandler):
    def get(self):
        self.response.headers['Content-Type'] = 'application/json'
        data = ['cat','dog','bird', 'wolf']
        data = json.dumps(data) 
        self.response.out.write(data)

app = webapp2.WSGIApplication([
    ('/', MainPage),
    ('/products', Products),
], debug=True)

and JS

<script>
    $( "#autocomplete" ).autocomplete({
        minLength: 2,
        source: "/products"
    });
</script>

I have autocomplete appearing to work with 2 minimum typeaheads. But when tested it isn't doing autocomplete/proper search. ie. It's querying all 4 items in the list regardless of my search.

Upvotes: 2

Views: 874

Answers (1)

clockwatcher
clockwatcher

Reputation: 3363

Jquery doesn't filter the list when you use an URL source. It passes the search term in the querystring as the term variable. The documentation for a remote source is here: http://api.jqueryui.com/autocomplete/#option-source

You need to return the filtered data in your handler based on the term request parameter. In other words, change your products handler up to something more like this:

class Products(webapp2.RequestHandler):
    def get(self):
        term = self.request.get('term', None)
        self.response.headers['Content-Type'] = 'application/json'
        data = ['cat', 'dog', 'bird', 'wolf']
        if term:
            data = [i for i in data if i.find(term) >= 0 ]
        data = json.dumps(data)
        self.response.out.write(data)

Here's a full working example based on the jquery-ui autocomplete sample:

import webapp2
import json

class MainPage(webapp2.RequestHandler):
    def get(self):
        self.response.out.write("""
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
  $( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#animals" ).autocomplete({
      source: "./products",
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id  );
      }
    });
  } );
</script>
</head>
<body>
<div class="ui-widget">
  <label for="animals">Animals: </label>
  <input id="animals">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
""")

class Products(webapp2.RequestHandler):
    def get(self):
        term = self.request.get('term', None)
        self.response.headers['Content-Type'] = 'application/json'
        data = ['cat', 'dog', 'bird', 'wolf']
        if term: 
            data = [{"label":i, "id":i + "_id"} for i in data if i.find(term) >= 0 ]
        data = json.dumps(data)
        self.response.out.write(data)

app = webapp2.WSGIApplication([
    ('/', MainPage),
    ('/products', Products),
], debug=True)

def main():
    from paste import httpserver
    httpserver.serve(app, host="0.0.0.0", port="8080")

if __name__ == '__main__':
    main()

Upvotes: 1

Related Questions