PDA

View Full Version : Ajax autocomplete combobox



jixnail
24 May 2007, 5:00 PM
I've just started using Ext, and I love the ajax autocomplete combobox!!

I've got the Live Search example working, and I need help to add a type ahead feature to filter the ajax returned data from JSON. I'm using a asp.net and call web service method to retun the JSON data. The web services return all employee from database.

Below is my code,



<script type="text/javascript">
Ext.onReady(function(){

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'svc_employee.aspx'
}),
reader: new Ext.data.JsonReader({
root: 'Employees',
id: 'ID'
}, [
{name: 'ID', mapping: 'ID', type: 'int'},
{name: 'Name', mapping: 'Name', type: 'string'},
{name: 'Title', mapping: 'Title', type: 'string'}
])
});
// Custom rendering Template
var resultTpl = new Ext.Template(
'<div class="search-item">',
'<h3><span>{Name}</span></h3>',
'</div>'
);

var search = new Ext.form.ComboBox({
store: ds,
displayField:'Name',
typeAhead: true,
loadingText: 'Searching...',
width: 300,
pageSize:10,
hideTrigger:true,
tpl: resultTpl
});

// apply it to the exsting input element
search.applyTo('txtItemNo');
});
</script>
How can I apply a type ahead filtering function?

jsakalos
24 May 2007, 6:10 PM
This is my combo config that does work out of the box. It's part of grid editor so I hope you extract the required info from it:


editor = new Ext.grid.GridEditor(new Ext.form.ComboBox({
store: new Ext.data.Store({
baseParams: {
requestID: 'getComboRows'
, objName: field.alias || field.name
, db: 'prs_system'
}
, proxy: new Ext.data.HttpProxy({method:'post', url:'/ajax.php'})
, reader: new Ext.data.JsonReader({
root: 'records'
, totalProperty: 'totalCount'
, id: 'valueField'
}, [{name:'valueField'},{name:'displayField'}])
})
, listeners: {select:{scope:grid.store, fn:function(combo, record, index) {
var srcRecord = combo.store.getById(combo.getValue());
if(srcRecord) {
var displayField = srcRecord.get('displayField');
}
var dstRecord = grid.activeEditor.record;
if(dstRecord) {
dstRecord.set(field.alias || field.name, displayField);
}
}
}}
, mode:'remote'
, triggerAction: 'all'
, forceSelection: true
// , typeAhead: true
, minChars: this.filterChars
, editable: true
, valueField: 'valueField'
, displayField: 'displayField'
, pageSize: 12
, minListWidth: 250
, minChars: 3
}));