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 = [[\         


        

Answer 1

You can use this approach also: provide a listener to combobox and catch this event:

 change: function() {
                        //debugger
                        var store = this.getStore();
                        store.clearFilter();
                        store.filter({
                            property: 'deviceName',//your property
                            anyMatch: true,
                            value   : this.getValue()
                        });
                    }

Answer 2

I had a similar requirement in ExtJs4 Check the tweaks in the below link... It worked for me perfectly.

http://atechiediary.blogspot.in/2013/06/first-page-extjs-containslike-search-in.html

Answer 3

I cam across something similar before. I looked into the doQeury function and it would seem to be filtering using the display name, without having set anyMatch parameter in the filter function. In such cases, there are no easy solution but to override doQuery or a create a new user extension. Fortunately, one can be found here

I think this may apply to Ext 2.3 since we recently upgraded, I would seem to have lost my documentation links. But that is how I would go about it.

Answer 4

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

Answer 5

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 6

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
  }
})