jQuery Autocomplete with Remote JSON Source + Google App Engine + Python

Question

So let's say I have a webapp which just lets users save their hobbies. So I have Kind like this:

class Hobby(ndb.Model):
    hobby_name = ndb.StringProperty()

Users just create Hobby entities using this form:

<form action="/new-hobby" method="post">
    <input type="text" name="hobby_name" id="new-hobby" />
    <input type="submit" value="Save New Hobby" />
</form>

Then this form is handled by this:

# Handles /new-hobby
class NewHobby(webapp2.RequestHandler):

    def post(self):
        hobby_name = self.request.get('hobby_name')
        if hobby_name:
            h = Hobby(hobby_name = hobby)
            h.put()

app = webapp2.WSGIApplication([
    ('/new-hobby/?', NewHobby)
], debug=True)

This is standard stuff. With this set up, users can be seen entering the same hobby in many ways (example: "basketball" can be entered "basket ball"). This is where an autocomplete functionality would be useful by increasing 'uniformed' input by all users.

So I've decided to use the Jquery's Multiselect Remote Autocomplete Widget (http://jqueryui.com/autocomplete/#multiple-remote):

 <script>
  $(function() {
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#birds" )
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        source: function( request, response ) {
          $.getJSON( "search.php", {
            term: extractLast( request.term )
          }, response );
        },
        search: function() {
          var term = extractLast( this.value );
          if ( term.length < 2 ) {
            return false;
          }
        },
        focus: function() {
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
      });
  });
  </script>

The remote source is specified above code in the line $.getJSON( "search.php",...);.

So assuming that I am on the right track, the question is: what file do I replace search.php with, and what should be inside that file?

Cristinacristine

Answer 1

search.php needs to be replaced with something like suggetsHobbies.php That file should return a list of hobbies that the auto-completion tool can use to build the list of hobbies that are suggested. It is given a parameter term that contains what the user has typed so far. Use that to restrict the list returned. F.ex. if term is "ba", return a list of hobbies beginning with "ba".

Triumph

Thank you for the answer Terje. AFter further research, I realise that the suggestHobbies.php should contain a "like" query. Do you know what this might look like using Python, NDB Queries, and GAE? – Cristinacristine

Answer 2

I think you should look into Django packages for this type of behaviour.

This page from djangopackages.com references several packages doing exactly what you want, and written for Django. I suggest you have a look at django-autocomplete-light (the doc is great), or django-selectable, which is more similar to your question's approach.

Zerline

Thanks for the answer @Flav. I'll look into this. My project is currently in jinja2, so I am very unfamiliar with django. – Cristinacristine

My bad, I thought this was involving Django somehow – Zerline