Sencha Touch 2.x AutoComplete

Basic Usage

Basic usage example for overlay and remote data request

xtype: 'autocompletefield',
label: 'Stadt',
value: '',
config: {
    resultsDisplay: {
        mode: 'overlay',
    },
	
    autoCompleteRequest: {											
        fields: [
            'id', 'city', 'state', 'county'
        ],
		
        requestType: 'remote',
        proxy: {
            url: 'http://geo.bendspoons.com/',
            extraParams: {
                returnType: 'json',
                token: '123456',
                mode: 'citystraight',
                like: 'true'
            },
            reader: {
                type: 'json',
                rootProperty: 'result'
            },
            paramField: 'city'
        }
    }
}
			

Config

• resultsDisplay.qMinLength {integer}
  minimum length of string to start autocomplete
• resultsDisplay.itemTpl
  The Autocomplete results are wrapped in Ext.list, so this can be defined like a regular itemTpl for Ext.list
• resultsDisplay.emptyText
  Ext.list emptyText
• resultsDisplay.loadingText
  Ext.list loadingText
• mode case-sensitiv
  Wheater "overlay" or "inline". "Overlay" opens on textfield focus an overlay for Autocompletion. "inline" renders the list direct below the textinput. (Problem width "inline": scrolling makes trouble and wont work)
• overlayConfig.zIndex
  Only necessary for "overlay" mode: CSS zIndex of the overlay
• overlayConfig.width
  Only necessary for "overlay" mode: width of the overlay
• overlayConfig.height
  Only necessary for "overlay" mode: height of the overlay
• overlayConfig.inputPlaceHolder
  Only necessary for "overlay" mode: placeholder for the overlay textfield
• autoCompleteRequest.fields
  Store/Model fields,define like regular
• autoCompleteRequest.requestType case-sensitiv
  Currently working: "remote" and "local". "remote" means gathering data from a webserver, "local" from a local json file
• autoCompleteRequest.proxy.url
  Wheater the local or remote url
• autoCompleteRequest.proxy.extraParams
  Only neccessary for "remote": Possible params for the api request, e.g. apikey: '1234'
• autoCompleteRequest.proxy.reader
  Definitions for store.reader
• autoCompleteRequest.proxy.paramField
  Only neccessary for "remote": is used for remote access as search param, like "query=TEXTINPUT", then paramField has to be 'query'. This value is set as textinput value
• autoCompleteRequest.proxy.filterField
  Only neccessary for "local": is used for store.filter and this value is set as textinput value
• itemTapCallback
  This function is called when tapped on Resultlistitem

Example "overlay"

xtype: 'autocompletefield',
label: 'Stadt',
value: 'Ha',
config: {
    resultsDisplay: {
        qMinLength: 2,
        itemTpl: 'Custom Tpl: {city}',
        emptyText: 'Custom: No results',
        loadingText: 'Custom: Searching...',
    	
        mode: 'overlay',
        overlayConfig: {
            zIndex: 5,	
            width: 200,
            height: 600,
            inputPlaceHolder: 'Custom: Enter City Name (German Cities)'
        }
    },
	
    autoCompleteRequest: {											
        fields: [
            'id', 'city', 'state', 'county'
        ],
		
        requestType: 'remote',
        proxy: {
            url: 'http://geo.bendspoons.com/',
            extraParams: {
                returnType: 'json',
                token: '123456',
                mode: 'citystraight',
                like: 'true'
            },
            reader: {
                type: 'json',
                rootProperty: 'result'
            },
            paramField: 'city'
        }
    },
	
    itemTapCallback : function(itemData) {
        console.log(itemData);
        alert('Selected: ' + itemData.city);
    }
}
			

Example "inline"

xtype: 'autocompletefield',
label: 'Stadt',
value: '',
config: {
    resultsDisplay: {
        qMinLength: 2,
        itemTpl: 'Custom Tpl: {city}',
        emptyText: 'Custom: No results',
        loadingText: 'Custom: Searching...',
    	
        mode: 'inline',
        inlineConfig: {
            resultsHeight: '300'
        }
    },
	
    autoCompleteRequest: {											
        fields: [
            'id', 'city', 'state', 'county'
        ],

        requestType: 'local', 		// From local source
        proxy: {
            url: 'results.json',
            reader: {
                rootProperty: 'result'
            },
            filterField: 'city'
        }
    },
	
    itemTapCallback : function(itemData) {
        console.log(itemData);
        alert('Selected: ' + itemData.city);
    }
}
			

Credit

Inspired by @martintajurs Sencha Touch 2 Autocomplete Textfield

Support

Any troubles or questions? I'll help if possible: Blog Post with comments