ExtJs: Search / Filter within a ComboBox

Question

I've the following problem / question in ExtJs 2.3:

I'd like to do a search within a combobox. I'll give you an example:

Ext.comboData.names = [['Peter', 'Paul', 'Amanda']];

var store = new Ext.data.SimpleStore({
     fields: ['name'],
     data: Ext.comboData.names
});


var combo = new Ext.form.ComboBox({
     name: '...',
     id: '...',
     store: store,
     displayField: 'name',
     typeAhead: true,
     mode: 'local',
     forceSelection: false,
     triggerAction: 'all',
     emptyText: '-',
     selectOnFocus: true,
     applyTo: '...',
     hiddenName: '...', 
     valueField: 'name'
     enableKeyEvents: true,
     lastQuery: '',
     listeners: {
         'keyup': function() {
               this.store.filter('name', this.getRawValue(), true, false);
         }
     }
});

When I would type in an 'a', there only should be 'Paul' and 'Amanda' in the "dropdown". So in other words I'm looking for a solution to filter the data not only by the entries' first letter, but maybe by using something like a regular expression (?) (like in SQL ... LIKE '%a%')...I also would need type of "onKeyDown"-event for my comboBox in order to filter the results on every single letter I add. How can I do that? Any ideas?

Tanks a lot in advance :)

Schildi

PS: Unfortunately I have to use my current version of ExtJs (2.3), so if there's a solution for my problem just in later versions, I would have to look for an other way...

Answer 1

anyMatch: true is all you need. (like in SQL ... LIKE '%a%') as you asked can be done by simply add this.

Example:

Ext.create('Ext.form.ComboBox', {
  name: 'name',
  anyMatch: true,
  allowBlank: true,
  editable : true,
  typeAhead: true,
  transform: 'stateSelect',
  forceSelection: true,
  queryMode: 'local',
  displayField: 'name',
  valueField: 'id',
  selectOnFocus: true,
  triggerAction: 'all',
  store: {
    fields: ['id', 'name'],
    proxy: {
      type: 'ajax',
      url: '/user'
    },
    autoLoad: true,
    autoSync: true
  }
})

Answer 2

I know this is an old question, but the best answers here recommend overriding doQuery. Overriding private methods should be avoided especially if you are ever going to upgrade. Instead, just add a beforequery listener to prevent doQuery from clearing the filter.

listeners: {
     'keyup': function() {
           this.store.filter('name', this.getRawValue(), true, false);
     },
     'beforequery': function(queryEvent) {
           queryEvent.combo.onLoad();
           // prevent doQuery from firing and clearing out my filter.
           return false; 
     }
 }

Answer 3

ExtJS ComboBox has a keydown event (and keyup, and keypress) that you can use for this purpose.

ExtJS SimpleStore also has a filter method that should suit your purpose. You can use it like this (to find values that contain an 'a' character):

store.filter('name', 'a', true, true)

First parameter is the record field, second is the string/regexpt to look for, third parameter means that filter should match any part of field (instead of just the beginning of the value), and the last value determines the case-sensitivity. You can turn it off, of course, if you like.

All of this applies to ExtJS 2.3.0. Hopefully this will get you started.

Answer 4

This can be done by overriding the doQuery method of combobox.