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?

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".

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.