Debounce on input

ionic-v1
1

I found this immensely helpful when trying to filter my results with an added debounce and I thought it might save someone else a headache.

Apparently Angular 1.3 adds a debounce option to an input so you can do something like this

<input type="search" ng-model="vanav.filters.head" ng-model-options="{debounce: 350}" placeholder="Search">

and it will add a very easy and simple debounce to your input.

For those that don’t know, a debounce essentially adds a small wait time that will reset every time something is input. Only when the timer finishes will it accept the string input.

This is usually desirable if, like me, you are filtering results using a filter option on ng-repeat, and you want it to wait until the user finishes typing in the string before the entire list is manipulated. Because the list isn’t manipulated on every letter, only once the user stops typing, it can lead to a performance boost.

Here is my full code.

    <input type="search" ng-model="vanav.filters.head" ng-model-options="{debounce: 350}" placeholder="Search">

    <div id="ecfr-content" class="list card" style="margin-top:10px;">
        <div ng-repeat="item in items | filter:vanav.filters | limitTo:ecfr.totalToDisplay track by item.id"
            class="item item-text-wrap">
            <h1>{{item.largeHead}}</h1>
            <h2>{{item.head}}</h2>
            <div ng-bind-html="item.blurb"></div>
            <br />
            <h2>{{item.tablesHead}}</h2>
            <div ng-bind-html="item.tables"></div>
        </div>
        <ion-infinite-scroll distance="5%"
                             on-infinite="loadMore()"
                ></ion-infinite-scroll>
    </div>

Source: http://stackoverflow.com/questions/15304562/how-to-put-a-delay-on-angularjs-instant-search

5 Likes
2

Very nice, thanks for sharing this :smile: