ComboBox with anyMatch search in ExtJS

Question

I have a ComboBox with a remote store with local filtering.
Instead of the default filtering, by the first characters like %query, I want to filter with the contains/anyMatch mode like %query%.

I tried to solve this with the answers in the question: ExtJs: Search / Filter within a ComboBox, but it didn't worked.

Code:

var users = Ext.create('Ext.form.ComboBox',{
    displayField : 'userName',
    valueField : 'userName',
    queryMode : 'local',
    typeAhead : true,
    store : Ext.create('Ext.data.Store', {
        model   : 'User',
        proxy       : {
            type    : 'ajax',
            url     : './user/list',
            reader  : {
                type: 'json',
                root: 'data'
            }
        }
    });
});

Thanks!

Solution 1

Just have to add the following code in the Ext.form.field.Combobox. This works in ExtJs 4.1 that doesn't have the anyMatch property.

listeners   : {
    beforequery: function(record){  
        record.query = new RegExp(record.query, 'i');
        record.forceAll = true;
    }
}

Solution 2

Use anyMatch config option since Ext 4.2.1. In earlier versions it looks like you'll need to override doQuery method in Ext.form.field.ComboBox just to be able to add that option to the filter instance you'll find in there:

me.activeFilter = new Ext.util.Filter({
    root: 'data',
    anyMatch: true, // <- add this
    property: me.displayField,
    value: queryString
});

Solution 3

The modifier g is more important, for a global search. i is only for case insensitive search.

listeners   : {
beforequery: function(record){  
    record.query = new RegExp(record.query, 'ig');
}}

Comments

[Mike Finch]

Using Ext JS 3.4.1, this example of overriding the beforequery event handler does change queryEvent.query from a string to a RegExp object. But, then none of the combobox's items match that query, even if I type characters that I know some of the items contain. Also, if I type a parenthesis, I get a crash because that parenthesis is treated an invalid part of the regular expression.

[Mike Finch]

stackoverflow.com/questions/18919737 expands on this example, and solves both of my problems. Using Ext.escapeRe() avoids crash when the search string contains regular expression symbols. Adding the length property to the created RegExp object is apparently a trick so that doQuery can compare that length to minChars