JQuery autocomplete using remote app source JSON + Google App Engine + Python

Question

So, let's say I have a webapp that allows users to save their hobbies. So I have a view like this:

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

Users simply create Hobby objects 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 processed as follows:

 # 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 material. With this setting, users can be seen in the same hobby in different ways (for example: “basketball”, you can enter “basketball”). Here, autocomplete functionality will be useful, increasing the "unified" input of all users.

So, I decided to use the Jquery 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 indicated above in the line $.getJSON( "search.php",...); .

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

Answer 1

search.php needs to be replaced with something like suggetsHobbies.php This file should return a hobby list that the autocomplete tool can use to make a list of hobbies that is being offered. It is given the term parameter, which contains what the user has typed so far. Use this to limit the returned list. F.ex. if term is "ba", return the hobby list starting with "ba".

Answer 2

I think you should study Django packages for this type of behavior.

This page from djangopackages.com links to several packages that do exactly what you want and are written for Django. I suggest you take a look at django-autocomplete-light (the document is good), or django-selectable , which is more like your approach to the question.