Create Form Auto Complete in Google App Engine

Question

I want to build a auto complete feature for a tags field like in SO on App Engine ... any idea how I should go about the process?

Server Side Algo? - What logic should be there for auto-complete?

App Engine implementation? - What should be the Datastore schema for this?

Answer 1

Hey. I came around this question a few days ago. The datastore schema doesn't really matter as long as you have a StringProperty field that you'd like to search on. Since App Engine does not support full text searching yet, you'll have to go with some sort of a "starts with" search, which is not 100% but quite okay for looking up tags.

There's a discussion on how to implement basic search on GAE on the Google Code blog which was done for Google I/O 2010. The code is written in Java but the principles are the same: http://googlecode.blogspot.com/2010/05/google-app-engine-basic-text-search.html

As to the logic, well this is totally up to you. I saw systems that use "starts with" queries on every key press, others use LIKE queries. But the limitations of GAE don't allow LIKE queries. More discussions in this thread: Google App Engine: Is it possible to do a Gql LIKE query?

Answer 2

Your question is more about javascript (client side) than GAE (server side).

You should start from something like jQuery AutoComplete. If the number of tags is small you can just embed the data in the html, otherwise look at the examples using AJAX calls.

If you go AJAX then you need something at the server side - all you have to do is put up some URL that accepts a query and returns JSON formated data. I like to use Django on GAE, it has nice serializers for this.

Answer 3

Just posted 2 part series on implementing autocomplete with GAE: server-side service with Python and continuation using YUI3 AutoComplete plugin.

In particular, using autocomplete for tags similar to SO YUI3 AutoComplete plugin offers option queryDelimiter which lets you define separator before selecting string to match. Thus, if it is set to space then plugin matches every new word typed in the textbox:

YUI().use('autocomplete', function (Y) {

      Y.one('body').addClass('yui3-skin-sam');

      // AutoComplete on search input field
      Y.one('#search_field').plug(Y.Plugin.AutoComplete, {
        queryDelimiter: ' ',
        source: '/rpc.xhr?action=ac_keywords&arg0={query}'
      }); 
});

The action ac_keywords (defined in GAE) looks up list tags that begin with typed string.