Delay on input (keyup) in order to request server

[Simon Azzopardi]

Hi guys,

Does anyone can give some help on how to achive this:

I need to on keyup on an input, an event will be trigerred to get the input value and search for through server side.

But in order to sent to many, I need some delay after keyup, just like after finishes entering a word

Can anyone give me some insight regarding this please?

Kind Regards

[Lucas Lacroix]

Take a look at ng2-bootstrap. It already has a typeahead component which should do what you want:

http://valor-software.com/ng2-bootstrap/#/typeahead

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293

[Simon Azzopardi]

Hi Lucas,

I need to store the string in another value to be passed to ag-grid.

All I want just to timeout the keyup...

[Lucas Lacroix]

Then use the standard Javascript setTimeout function.

[Simon Azzopardi]

Hi Lucas 

I have tried it out but I cannot call a function which I have in my component... telling me that my function is not a function :/

Any help?

[Simon Azzopardi]

I am trying like this:

delay = (function(){
        var timer = 0;
        return function(callback:any, ms:any){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();


    clientSearchFilter($event:any){
        this._searchKeywords = $event.target.value;
   
         this.delay(function(){
            this.createNewDataSource(true);
        }, 1000 );
    }

but is telling me this.createNewDataSource is not a function

[Lucas Lacroix]

Right... Because you're not scoping correctly. Within a function, even a IIFE, the 'this' pointer is different from the enclosing scope. Example:

class TestClass {

    someFunc() {

        // 'this' references an instance of TestClass, so this will work:

        this.otherFunc();

        (function() {

              // 'this' references 'window' and this will not work

              this.otherFunc();

        })();

        ((function() {

              // 'this' references the same instance of TestClass as the enclosing scope

              // due to the bind call, so this will work:

              this.otherFunc();

        }).bind(this))();

        (() => {

             // 'this' references the same instance of TestClass as the enclosing scope

             // due to the 'fat-arrow' syntax, so this will work:

             this.otherFunc();

        })();

    }

    otherFunc() {

        console.log('It works!');

    }

}

I suggest you use the fat-arrow syntax:

this.delay(() => {this.createNewDataSource(true);}, 1000);

[Simon Azzopardi]

Cheers Lucas...

Kind reagrds