PDA

View Full Version : autocomplete in extjs



Vamshi Barana
25 Sep 2013, 11:03 PM
Hi,

Below is my combo with autocomplete .I want it to show the values with any match of two consecutive characters.Can anybody please help in this.

new Ext.form.ComboBox( {
fieldLabel : 'Select name',
store : store,
id : 'unit',
listWidth : browserWidth / 9,
valueField : 'id',
displayField : 'name',
hideTrigger:true,
triggerAction : 'all',
emptyText : 'Type atleast three letters...',
mode : 'local',
listEmptyText :'<p style="color:red" >*Not Found</p>',
forceSelection : true,
hiddenName : 'pojo.name',
width:130,
minChars :2,
allowBlank : false,
enableKeyEvents: true,
editable:true,
clearFilterOnReset :false,
lazyRender:true,
listeners: {
}

});
Thanks,
Vamshi

willigogs
26 Sep 2013, 5:22 AM
Can you clarify exactly what you're trying to achieve?

Combos automatically enable autocomplete when the typeAhead config is set to true. This will filter the store based on what you type into the combo and return any values that START with what you type.

If you want the store to filter so the typed string matches ANY part of the record values, then you would probably need to apply your own filter function on the combo's keyup event.

willigogs
26 Sep 2013, 7:09 AM
Here's an example of a combo featuring autocomplete which matches any character (so typing "b" will return "Alabama", "District of Columbia", and "Nebraska"):
http://jsfiddle.net/Whinters/nsgQh/

Vamshi Barana
26 Sep 2013, 10:36 PM
Hi ,

Thanku for the Reply... I have doQuery() function and it filters the data as per minchars, But its taking case-sensitive.I need Case-insensitive How to achieve it??.

Thanku,
Vamshi

willigogs
27 Sep 2013, 1:40 AM
Can you provide your current code with the doQuery function?

Vamshi Barana
30 Sep 2013, 4:14 AM
Hi ,

Thanku all. I got the Solution .



new Ext.form.ComboBox({
fieldLabel: 'Name',
store:nameStore,
id:'name',
valueField:'id',
displayField:'name',
triggerAction: 'all',
mode: 'local',
forceSelection : true,
selectOnFocus:true,
allowBlank: false,
width:150,
emptyText:'Type atleast two letters...',
listEmptyText :'<p style="color:red" >*Name Not Found</p>',
minChars :2,
enableKeyEvents: true,
hideTrigger : true,
editable : true,
listeners:{
beforequery: function(q) {
if (q.query) {
// we need the length later in the doQuery function,
// for respecting minChars
var length = q.query.length;
q.query = new RegExp(q.query,'i');
q.query.length = length;
}
},
'keyup' : function(){

this.store.filter([
this.collapse()]);


}
}
});


Here, minchars is to type minimum of two characters; 'beforequery' function filters data with anymatch wrt to minchars.

Thanks,
Vamshi