backend.py

import psycopg2, psycopg2.extras
import little_pger as db
from flask import *

application = Flask('autocomplete-tribute')

@application.route('/autocomplete', methods=['GET'])
def autocomplete():
    conn = psycopg2.connect("dbname=autocomplete-tribute user=christian", 
                            connection_factory=psycopg2.extras.RealDictConnection)
    cursor = conn.cursor()
    where = {}
    if request.args['query']:
        query_tokens = request.args['query'].split()
        fields = ['adjective', 'animal', 'version']
                                              # MUST be a set in this context!
        where[('||'.join(fields), 'ilike')] = {'%%%s%%' % v for v in query_tokens}
    # else: we want everything! 
    return jsonify(success=True, 
                   data=db.select(cursor, 'ubuntu', where=where, order_by='id'))

combo.js

Ext.onReady(function() {

    Ext.define('Ubuntu', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'release',
            convert: function(v, rec) {
                return Ext.String.format('{0} {1} - {2}', 
                                         rec.raw.adjective, 
                                         rec.raw.animal, 
                                         rec.raw.version);
            }
        }]
    });

    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Ubuntu Releases',
        width: 300,
        bodyPadding: 10,
        layout: 'anchor',
        draggable: true,
        style: 'margin: 20px',        
        items: [{
            xtype: 'combo',
            store: Ext.create('Ext.data.Store', {
                model: 'Ubuntu',
                proxy: {
                    type: 'ajax',
                    url: '/backend/autocomplete',
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                }                    
            }),
            typeAhead: true,
            displayField: 'release',
            hideLabel: true,
            anchor: '100%',           
            minChars: 3,
            listConfig: {
                loadingText: 'Searching...',
                emptyText: 'No matching release found'
            }
        }, {
            xtype: 'component',
            style: 'margin-top:10px',
            html: 'Type at least 3 characters to trigger search'
        }]
    });

});

query.sql

select * from ubuntu where 
    adjective || animal || version ilike E'%lynx%' and 
    adjective || animal || version ilike E'%04%' and 
    adjective || animal || version ilike E'%lucid%'

ubuntu.sql

create table ubuntu (
    id serial primary key,
    adjective text,
    animal text,
    version text
);

insert into ubuntu (adjective, animal, version) values ('Warty', 'Warthog', '4.10');
insert into ubuntu (adjective, animal, version) values ('Hoary', 'Hedgehog', '5.04');
insert into ubuntu (adjective, animal, version) values ('Breezy', 'Badger', '5.10');

-- ...for more: https://wiki.ubuntu.com/DevelopmentCodeNames

where.py

where = {}

where['adjective'] = 'Lucid' 
# where adjective = 'Lucid'

where['adjective'] = ('Warty', 'Dapper')
# where adjective in ('Warty', 'Dapper')

# For sequence values, the rules are: a tuple translates 
# to the 'in' operator (as above), a list to a PG array 
# and a set to a conjunction of predicates (see below)

where[('version::real', '<=')] = 10.04
# where version::real <= 10.04

where[('adjective', 'ilike')] = {'%lucid%', '%lynx%'} 
# where adjective ilike '%lucid%' and adjective ilike '%lynx%'