Add Google Place Auto Suggest to Sencha Touch

Hello,

Recently in one of my project we had a requirement to add Google Place Auto Suggest in Sencha Touch app and I faced certain issue in that so in this blog I am going to explain how to do this.

You can get more information about google place auto suggest from following link.

https://developers.google.com/places/web-service/autocomplete

When you implement it in any web app you will get following result.

As when you start typing it will give you suggestions and you can pick any one suggestion from it.

When we implement same thing with Sencha Touch text field it was working fine. When you start typing suggestions were working but the problem was when user tap to pick one of the suggestion it was not working. It just closes the suggestions and nothing is saved in textfield. There were some solutions like adding some classes and all. I tried everything but it was not working at all. So I came up with different solution. First of all add following textfield in your view.

{

xtype: 'panel',

flex:'1',

items:[

{

xtype: 'textfield',

placeHolder: 'TYPE IN THE CITY OR THE ADDRESS',

itemId: 'autoSuggest',

id: 'autoSuggest',

height: 10,

inputCls:'x-input-el x-form-field x-input-text grey-input',

name: 'address',

allowBlank: false,

autoCapitalize: false,

clearIcon: false

}

]

}

Now bind key up event for this textfield in your controller.

'#autoSuggest': {

keyup: 'onSearchAddressTap'

}

Now our logic is the query Google place API manually and store result in Data Store and show it in dataview. So we will need model and store.

Following is our model.

Ext.define('MYAPP.model.AddressSuggestion', {

    extend: 'Ext.data.Model',

    config: {

        fields: [

            { name: "description", type: 'string' }

        ]

    }

});

And Following is our store.

Ext.define('MYAPP.store.AddressSuggestion',{

    extend:'Ext.data.Store',

    config:{

        model: 'MYAPP.model.AddressSuggestion',

        autoLoad: true,

        proxy:{

            type: 'memory'

        }

    }

});

Now lets key up event.

onSearchAddressTap: function(textField){

Ext.getStore('AddressSuggestion').removeAll();

if(textField.getValue().length > 3){

this.getVenueAddress().show();

Ext.Ajax.request({

url : 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input='+textField.getValue()+'&types=geocode&language=fr&key=YOURKEY',

scope : this,

//method to call when the request is successful

success:function(response,opts)

{

var result = Ext.decode(response.responseText);

for(var i =0;i

Ext.getStore('AddressSuggestion').add({'description':result.predictions[i].description});

}

console.log(result);

},

failure:function(err)

{

}

});

}

}

So as you can see above we are sending an Ajax request to google maps api and store result in Datastore. 

Now add following dataview in your view just below the above textfield.

{

xtype: 'panel',

flex: '1',

layout: 'fit',

items: [

{

xtype   : 'dataview',

margin: '0 20 0 20',

itemId: 'venueAddress',

id: 'venueAddress',

itemTpl:

[

'<table style="border-bottom: 1px solid #e3e3e3;"><tr><td style="padding-bottom: 12px;padding-top: 12px;width:95%"><div style="color:#262626;font-size: 15px">{description}</div></td><td><img width="40" height="40" src="resources/images/howMuchSpace.png" /></td></td></tr></table>'

],

store: 'AddressSuggestion'

}

]

}

So now as soon as you start typing you will get result filled up in dataview and then add itemtap event of dataview and get the selected address and hide the dataview.

onVenueAddressItemTap: function(list, index, target, record, e){

this.getAutoSuggest().setValue(record.get('description'));

this.getVenueAddress().hide();

}

Ultimate output is like following.

Hope this helps you.