how to daly send request after user stop typing using angularjs

Question

I am trying to find away to delay send request to WebApi after user stop typing using Angularjs 500 or 800 millisecond right now my code will send what user type and query data. I am thinking to delay send request but I don't know how to do it

                <label for="exampleInputEmail1">search</label>
                <input type="search" class="form-control user-search" data-ng-model="searchString" ng-keyup="search()" placeholder="Enter search here">
<div class="row">
    <div ng-repeat="user in users" class="col-xs-6 col-lg-4">
        <div>
            <h3>{{user.FName +' '+ user.LName }}</h3>
            <p>{{user.Title}}</p>

        </div>

HomeController

(function () {
    'use strict';

    var app = angular.module('finduser');

    var HomeController = function($scope, homeService) {

        $scope.searchString = "";
        $scope.currentPage = 1;

        var getUsers = function(searchString) {
            if (searchString) {
                homeService.getUsers(searchString).then(function(data) {
                    $scope.users = data;
                }, function(errMsg) {
                    console.log(errMsg);
                });
            }
        } // /getUsers


    //search user                  
        $scope.search = function () {
            if ($scope.searchString.length >= 2) {
                getUsers($scope.searchString);
            }
        };// /search

    };// /HomeController


    app.controller('HomeController', ['$scope', 'HomeService', HomeController]);

}());

Home Service

(function () {
    'use strict';

    var app = angular.module('finduser');

    var HomeService = function ($http) {

        var getUsers = function (search) {
            var str = search.replace('.', '~');
            var uri = 'api/values?value=' + encodeURIComponent(str);

            return $http.get(uri).then(function (response) {
                return response.data;
            });
        };

        return {
            getUsers: getUsers
        };
    };

    app.factory('HomeService', ['$http', HomeService]);
}());

what are you trying to achieve ? Do you want the request to be sent only x amount of MS after user stop typing ? — Neta Meta
– Neta Meta, Commented Feb 26, 2015 at 0:06

mjswensen · Accepted Answer · 2015-02-26 00:28:49Z

5

Your decision to delay (or "debounce," as this technique is sometimes called) is wise--if you get enough users on your application, sending an ajax request with each keystroke is an effective way to bring your server to its knees (not to mention possibly making your client application feel quite sluggish).

The trick is clearing the timeout when you receive another keystroke event. That way only when the user stops typing the timeout will have a chance to complete. Consider this example:

var timeoutPromise;
$scope.search = function() {
  $timeout.cancel(timeoutPromise);
  timeoutPromise = $timeout(function() {
    // Make your API request here...
  }, 800);
};

answered Feb 26, 2015 at 0:28

mjswensen

3,1244 gold badges31 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marjes · Accepted Answer · 2015-02-26 00:08:04Z

0

You can try with $timeout, i think this can work

  return $timeout(function() {$http.get(uri).then(function (response) {
                return response.data;
            });},800);// delay 800 ms

answered Feb 26, 2015 at 0:08

marjes

17215 bronze badges

Comments

Neta Meta · Accepted Answer · 2015-02-26 00:20:36Z

0

You can use angular $timeout or javascript native timeout either will work just fine. my example will be with native js

$scope.search = function () {
    clearTimeout($scope.timeout); // you any previously set Timeouts
    $scope.timeout = setTimeout(function(){ // start a new timeout
        if ($scope.searchString.length >= 2) { // do whatever you need.
            getUsers($scope.searchString);
        }
        clearTimeout($scope.timeout);// clear time out just in case.
    },800);
};

Other way is to use debounce with validation and form submit but i wont go into that.

answered Feb 26, 2015 at 0:20

Neta Meta

4,04510 gold badges48 silver badges72 bronze badges

Collectives™ on Stack Overflow

how to daly send request after user stop typing using angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related