How to put a delay on AngularJS instant search

Question

I have a performance issue that I can t seem to address  I have an instant search but it s somewhat laggy  since it starts searching on each keyup     JS   var App   angular module  App         App controller  DisplayController   function  scope   http     http get  data json   then function result        scope entries   result data            HTML    lt input id  searchText  type  search  placeholder  live search     ng-model  searchText    gt   lt div class  entry  ng-repeat  entry in entries   filter searchText  gt   lt span gt   entry content   lt  span gt   lt  div gt    The JSON data isn t even that large  300KB only  I think what I need to accomplish is to put a delay of  1 sec on the search to wait for the user to finish typing  instead of performing the action on each keystroke  AngularJS does this internally  and after reading docs and other topics on here I couldn t find a specific answer   I would appreciate any pointers on how I can delay the instant search

User · Answer

Debounced   throttled model updates for angularjs   http   jsfiddle net lgersman vPsGb 3    In your case there is nothing more to do than using the directive in the jsfiddle code like this    lt input      id  searchText       type  search       placeholder  live search          ng-model  searchText       ng-ampere-debounce   gt    Its basically a small piece of code consisting of a single angular directive named  ng-ampere-debounce  utilizing http   benalman com projects jquery-throttle-debounce-plugin  which can be attached to any dom element  The directive reorders the attached event handlers so that it can control when to throttle events   You can use it for throttling debouncing   model angular updates    angular event handler ng- event    jquery event handlers  Have a look   http   jsfiddle net lgersman vPsGb 3    The directive will be part of the Orangevolt Ampere framework  https   github com lgersman jquery orangevolt-ampere

User · Answer

See answer below for a Angular 1 3 solution    The issue here is that the search will execute every time the model changes  which is every keyup action on an input   There would be cleaner ways to do this  but probably the easiest way would be to switch the binding so that you have a  scope property defined inside your Controller on which your filter operates  That way you can control how frequently that  scope variable is updated  Something like this   JS   var App   angular module  App         App controller  DisplayController   function  scope   http   timeout         http get  data json   then function result            scope entries   result data                  This is what you will bind the filter to      scope filterText               Instantiate these variables outside the watch     var tempFilterText               filterTextTimeout       scope  watch  searchText   function  val            if  filterTextTimeout   timeout cancel filterTextTimeout            tempFilterText   val          filterTextTimeout    timeout function                  scope filterText   tempFilterText             250      delay 250 ms              HTML    lt input id  searchText  type  search  placeholder  live search     ng-model  searchText    gt   lt div class  entry  ng-repeat  entry in entries   filter filterText  gt       lt span gt   entry content   lt  span gt   lt  div gt

User · Answer

For those who uses keyup keydown in the HTML markup  This doesn t uses watch   JS  app controller  SearchCtrl   function   scope   http   timeout      var promise          scope search   function         if promise          timeout cancel promise             promise    timeout function           ajax call goes here         2000              HTML   lt input type  search  autocomplete  off  ng-model  keywords  ng-keyup  search    placeholder  Search     gt

User · Answer

I solved this problem with a directive that basicly what it does is to bind the real ng-model on a special attribute which I watch in the directive  then using a debounce service I update my directive attribute  so the user watch on the variable that he bind to debounce-model instead of ng-model    directive  debounceDelay   function   compile   debounce    return     replace  false    scope        debounceModel             link  function  scope  element  attr        var delay  attr debounceDelay      var applyFunc   function            scope debounceModel   scope model            scope model   scope debounceModel      scope  watch  model   function           debounce applyFunc  delay               attr  set  ngModel    model        element removeAttr  debounce-delay       so the next  compile won t run it again       compile element  scope                Usage    lt input type  text  debounce-delay  1000  debounce-model  search  gt  lt  input gt    And in the controller         scope search            scope  watch  search   function  newVal  oldVal          if newVal     oldVal           return         else    do something meaningful     Demo in jsfiddle  http   jsfiddle net 6K7Kd 37    the  debounce service can be found here  http   jsfiddle net Warspawn 6K7Kd   Inspired by eventuallyBind directive http   jsfiddle net fctZH 12

User · Answer

Angular 1 3 will have ng-model-options debounce  but until then  you have to use a timer like Josue Ibarra said  However  in his code he launches a timer on every key press  Also  he is using setTimeout  when in Angular one has to use  timeout or use  apply at the end of setTimeout

User · Answer

I think the easiest way here is to preload the json or load it once on dirty and then the filter search will take care of the rest  This ll save you the extra http calls and its much faster with preloaded data  Memory will hurt  but its worth it

User · Answer

I believe that the best way to solve this problem is by using Ben Alman s plugin jQuery throttle   debounce  In my opinion there is no need to delay the events of every single field in your form   Just wrap your  scope  watch handling function in   debounce like this    scope  watch  searchText     debounce 1000  function         console log  scope searchText       true

User · Answer

Another solution is to add a delay functionality to model update  The simple directive seems to do a trick   app directive  delayedModel   function         return           scope                model    delayedModel                     link  function scope  element  attrs                 element val scope model                scope  watch  model   function newVal  oldVal                    if  newVal     oldVal                        element val scope model                                                          var timeout              element on  keyup paste search   function                     clearTimeout timeout                   timeout   setTimeout function                         scope model   element 0  value                      element val scope model                       scope  apply                       attrs delay    500                                          Usage    lt input delayed-model  searchText  data-delay  500  id  searchText  type  search  placeholder  live search       gt    So you just use delayed-model in place of ng-model and define desired data-delay   Demo  http   plnkr co edit OmB4C3jtUD2Wjq5kzTSU p preview

User · Answer

Just for users redirected here  As introduced in Angular 1 3 you can use ng-model-options attribute   lt input         id  quot searchText quot          type  quot search quot          placeholder  quot live search    quot          ng-model  quot searchText quot         ng-model-options  quot   debounce  250   quot    gt

User · Answer

Why does everyone wants to use watch  You could also use a function   var tempArticleSearchTerm   scope lookupArticle   function  val        tempArticleSearchTerm   val        timeout function              if  val    tempArticleSearchTerm                  function you want to execute after 250ms  if the value as changed                   250

User · Answer

lt input type  text      ng-model   criteria searchtext         ng-model-options   debounce    default   1000   blur   0        class  form-control       placeholder  Search   gt    Now we can set ng-model-options debounce with time and when blur  model need to be changed immediately otherwise on save it will have older value if delay is not completed

User · Answer

UPDATE  Now it s easier than ever  Angular 1 3   just add a debounce option on the model    lt input type  text  ng-model  searchStr  ng-model-options   debounce  1000   gt   Updated plunker  http   plnkr co edit 4V13gK  Documentation on ngModelOptions  https   docs angularjs org api ng directive ngModelOptions  Old method   Here s another method with no dependencies beyond angular itself   You need set a timeout and compare your current string with the past version  if both are the same then it performs the search    scope  watch  searchStr   function  tmpStr      if   tmpStr    tmpStr length    0      return 0      timeout function             if searchStr is still the same          go ahead and retrieve the data     if  tmpStr      scope searchStr               http get    echo jsontest com res    tmpStr  success function data               update the textarea          scope responseData   data res                        1000         and this goes into your view    lt input type  text  data-ng-model  searchStr  gt    lt textarea gt    responseData    lt  textarea gt    The mandatory plunker  http   plnkr co dAPmwf

User · Answer

In Angular 1 3 I would do this   HTML    lt input ng-model  msg  ng-model-options   debounce  1000   gt    Controller    scope  watch  variableName   function nVal  oVal        if  nVal     oVal            myDebouncedFunction                Basically you re telling angular to run myDebouncedFunction    when the the msg scope variable changes  The attribute ng-model-options   debounce  1000   makes sure that msg can only update once a second

[search] How to put a delay on AngularJS instant search?

Examples related to search

Examples related to filter

Examples related to angularjs

Examples related to timeout

Examples related to delay