Live Search Combo Box Isn't Working ExtJS 4.2.1 - extjs

Question

I'm not sure what's wrong with my code. However after I type 4 characters on combobox, all of value will be displayed, not filtered based on characters that I have typed. Because of that my live search is broken. Please see attached image for better illustration.
I'm creating combobox inside panel as one of item
{
xtype: 'combobox',
fieldLabel: 'Guest Name',
padding: '10px 10px 20px 10px',
allowBlank: false,
id: 'guest_id_payment',
name: 'guest_id',
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{identity_number} - {name}</div>',
'</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{identity_number} - {name}',
'</tpl>'
),
valueField: 'identity_number',
store: 'SGuest',
height: 20,
queryMode: 'remote'
}
This is the store:
Ext.define('ghb.store.SGuest', {
extend: 'Ext.data.Store',
model: 'ghb.model.MGuest',
autoLoad: true,
autoSync: true,
proxy: {
pageParam: false,
startParam: false,
limitParam: false,
type: 'ajax',
api: {
create: '/ghb_manager/add_guest',
read: '/ghb_manager/data_guest',
update: '/ghb_manager/edit_guest',
destroy: '/ghb_manager/delete_guest'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data'
},
root: 'data'
}
});
I'm also add change event listener
'#guest_id_payment':{
change: this.changeGuestCombo
},
This is the function of change event listener, loading another store (not the store of ComboBox)
changeGuestCombo: function(self, newValue, oldValue, eOpts){
var store = Ext.getStore('SReservation');
store.load({
params: {
data: self.getValue(),
}
});
},
N.B. I'm using 4.2.1

Answer 1

The way you currently have it setup the filtering should be handled server side. If you change queryMode: 'remote' to queryMode: 'local' then the filter should work the way you want.
queryMode: 'remote' tells the combo box to call the proxy with the value you typed and the server would have to return only matching values. This is helpful if you have a huge dataset to search

Answer 2

I found the problem. When we use tpl & displayTpl on Combobox, the livesearch feature won't work

Answer 3

When you are using custom tpl and displayTpl in your Combobox, you can define a custom Filter function, for example on key up:
// Clear the filter collection without updating the UI
store.clearFilter(true);
store.filter([
{filterFn: function(item) { return item.get("identity_number") == "[....]" }}
]);
For more information check the ExtJS documentation.