PDA

View Full Version : search field with automatic search



marcus78
24 Nov 2010, 4:25 AM
Hi,

sorry if the question has already been posted, I lokked within this forum, but I did not find threads related to that.

I would like to have a search field, that searches for the value typed in, automatically after 3 characters have been entered, without validating the field with <ENTER>.
Extjs version is 3.2.

Not sure that I'm clear... If not, ask me !
Thanks in advance.

Condor
25 Nov 2010, 8:14 AM
Add a 'keyup' handler to the field that performs the search when 3 or more characters are entered.

marcus78
26 Nov 2010, 2:35 AM
Hi Condor,

thanks a lot, your solution works fine.
For those interested in, find below the modified code of searchfield.js including this modification.
As soon as 3 charachters are entered, it starts to search.


Add a 'keyup' handler to the field that performs the search when 3 or more characters are entered.

Modified code for searchfield.js
----------------------------------------
*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected] ([email protected])
*
* http://extjs.com/license (http://extjs.com/license)
*/

Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
Ext.app.SearchField.superclass.initComponent.call(this);
this.on('specialkey', function(f, e){
if(e.getKey() == e.ENTER){
this.onTrigger2Click();
}
}, this);
this.on('change', function(f, e){
var v = this.getRawValue();
if(v.length > 3){
this.onTrigger1Click();
return;}
}, this),
this.on('keyup', function(){
var v = this.getRawValue();
if(v.length >= 3){
this.onTrigger2Click(); }
});
},

validationEvent:false,
enableKeyEvents: true,
validateOnBlur:false,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
hideTrigger1:true,
width:180,
hasSearch : false,
paramName : 'query',

onTrigger1Click : function(){
if(this.hasSearch){
this.el.dom.value = '';
var o = {start: 0, limit: 15};
this.store.removeAll();
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = '';
this.store.reload({params:o});
this.triggers[0].hide();
this.hasSearch = false;
}
},

onTrigger2Click : function(){
var v = this.getRawValue();
if(v.length < 1){
this.onTrigger1Click();
return;
}
var o = {start: 0, limit: 15};
this.store.removeAll();
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = v;
this.store.reload({params:o});
this.hasSearch = true;
this.triggers[0].show();
}
});
----------------------------------