CODEWITHSUNDEEP
extjscomboboxtypeahead
Multitut
Multitut

Reputation: 2169

Filter options on ExtJS ComboBox with typeAhead

I basically want to make a combo box look like a textBox with autocomplete/typeahead capabilities.

I have achieved almost everything but filtering the results on type ahead using the following code:

var tboxReportaNombre = Ext.create('Ext.form.field.ComboBox', {
    margin: '5 0 0 10',
    store: reportersNamesStore,
    displayField: 'vcReportaNombre',
    valueField: 'vcReportaNombre',
    hideTrigger: true,
    typeAhead: true,
    typeAheadDelay: 100,
    minChars: 2,
    mode: 'local'
});

And this is the store I am using:

var reportersNamesStore = Ext.create('Ext.data.Store', {
    fields: ['vcReportaNombre'],
    proxy: {
        type: 'ajax',
        url: '/SIMAC/Incidencia/GetReportersNames',
    }
});

It is working just fine, but when I start typing, I would like the dropdown list to be filtered to match my query. Right now it doesn't (as shown in the image below).

Dropdown not matching my query

Any help would be really appreciated. Thanks!

Upvotes: 2

Views: 11946

Answers (1)

Multitut
Multitut

Reputation: 2169

I've just solved it, I had to add the properties queryMode set to local and lastQuery set to empty string.

Ending up having this code:

var tboxReportaNombre = Ext.create('Ext.form.field.ComboBox', {
    margin: '5 0 0 10',
    store: reportersNamesStore,
    displayField: 'vcReportaNombre',
    valueField: 'vcReportaNombre',
    hideTrigger: true,
    typeAhead: true,
    typeAheadDelay: 100,
    minChars: 2,
    queryMode: 'local',
    lastQuery: ''
});

I think Sencha should implement a Typeahead property and methods to its textboxfield.

Upvotes: 6

Related Questions