Extjs combobox default filters with the start of the combobox item i.e. if one of the combobox item's display value is 'United States' then typing 'Uni' will provide 'United States'. However if you type 'ted' or 'ates' it will not provide 'United States' in the filter list.
Also the combobox default filter is case sensitive i.e. if you type 'uni' then it does not list out 'United States'.
To overcome above restrictions and allow subsearch and case insensitive filter we need to override the combobox (specially the doQuery method).
Following code shows how to override the Extjs combobox to allow any match and case insensitive filter search.
In above example we have overridden the combobox doQuery method to perform any match and also customized the combobox caseSensitive check.
Also we have overridden the onTypeAhead method so as to filter the content based on whatever the substring is provided. If this method is not overridden then on typeAhead filter will be reset to the first character of the matching text.
Once we are done with overriding the combobox, we can use anyMatch and caseSensitive attributes to specify whether we want complete word search or case sensitive search for combobox.
Note : The anyMatch custom attribute is defaulted to false so as to continue with existing combobox functionality. In order to perform any substring match you need to pass true value to combobox config. Whereas caseSensitive is defaulted to false to allow case insensitive check by default. If you want to restrict the case sensitivity then pass the config attribute value as true.
Hi
ReplyDeleteIs it possible to share the code as text?
Thanks
I want to thank you for this example.
ReplyDeleteAm glad that this post has helped you.
DeleteCheers
I had a requirement like,
ReplyDeleteIn combo box a drop down list is there, extjs filters the list
when we enter any text characters like 'b'... which will display all words starting with 'b'.
Requirement:
while filtering values in combo box, a '?'(question mark) specifies any match from a to z and 0 to 9
Example:i have a list of values like
1.raja 2.123 3.ram 4.10211.In the combobox if i enter '?' it should display all values
2.If i enter '?a' it should display raja,ram
3.If i enter '?2?' it should display 123
4.If i enter '?0?1' it should display 1021
Since Extjs store's filter method accepts regular expression, you can pass the regular expression that fulfills your requirement.
DeleteFor e.g: In example that I gave if you want to achieve the wildcard search then you need to modify the line
'this.store.filter(this.displayField, q, this.anyMatch, this.caseSensitive);'
with following line
'this.store.filter(this.displayField, new RegExp("^"+q.replace(/\?/g, "."), this.anyMatch, this.caseSensitive);'
Note that this replaces the user supplied '?' character into '.' which looks for single occurence of any character within reg. exp.
Also this strictly performs the starts with check. So in between text filter wont be applied. If you want to have in between text filter then use RegExp(q.replace(/\?/g, ".").
Hope this satisfies your requirement.
You can make your dropdown box to perform a "contains" search also! Just do the following..
ReplyDeletelisteners: {
beforequery: function(record){
record.query = new RegExp(record.query, 'i');
record.forceAll = true;
}
}
Also setting hideTrigger: true will convert the dropdown to textbox.
Here is the link to explain in detail: http://atechiediary.blogspot.in/
DeleteCan anybody say where I shoud call this ovrride combo?
ReplyDeleteThanks a lot
ReplyDelete