How to implement an auto search in angular?

Question

I am trying to implement autoSearch in angular (+jqeuryEasyUI). I use mongoDB as the database.

In my controller, I wrote something like that:

$scope.$watch('searchInput.text', function() {
  $timeout(functoin() {
    $scope.performSearch($scope.searchInput.text);
    }, 1500)
}

The function is called every time the user types another char in the search box input, and the function: performSearch(searchInput) is send a GET request to the mongoDB to retrieve data for the current input string.

My problem is that if the user type,say, 3 letters , I want to cancel the request for the first letter and the request for the 2 first letter, and search only the 3 letter together.

That way I used the Timeout function, that any change the accuer in this time will cancel the previous request.

How can I mange the request? How do I tell the $watch function that if there was any change, don't send the request?

I heard of working with promises but I can't figure out how can it help in this situation.

Thank you very much!

Pramod Karandikar · Accepted Answer · 2014-08-19 08:29:29Z

1

Have you considered using AngulaUI-Bootstrap typeahead feature? Refer to this link. It has configuration for timeout, minimum characters for firing search and others. It's east to implement as well.

answered Aug 19, 2014 at 8:29

Pramod Karandikar

5,3377 gold badges45 silver badges75 bronze badges

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

1 Comment

engForLife Over a year ago

thank you! in the end, you were right.. angular-bootstrap has functoin that can handel that..

Mosho · Accepted Answer · 2014-08-19 08:20:08Z

1

Try this in your controller:

var timeoutHandle;

$scope.$watch('search', function() {
  $timeout.cancel(timeoutHandle);
  timeoutHandle = $timeout(function() {
    console.log('searching');
  }, 1500)
})

This will cancel the previous timeout and set a new one with each change of the input, so that a request will only be sent 1.5 seconds after the last change.

PLUNKER

answered Aug 19, 2014 at 8:20

Mosho

7,0783 gold badges36 silver badges52 bronze badges

Comments

Marcin Mikołajczyk · Accepted Answer · 2014-08-19 08:14:13Z

I have this kind of functionality, heres sample code:

in controller

MyService.delayCall(function() {

            MyService.someFunc(function(data) {
                ...
            });

        },400);

in services

 delayCallId : 0,
       delayCall : function(call,milisecs) {
           this.delayCallId++;
           var xxx = this;
           var myId = this.delayCallId;
           $timeout(function() {
               if (xxx.delayCallId === myId) {
                   call();
               }
           }, milisecs);
       }

someFuncRequest: 1,
        someFunc : function(callback) {
            this.doyouwantRequest++;
            var xxx = this;
            $http.get(
                    '/some/rest/function?requestId='
                    + this.someFuncRequest).success(
                    function(data, status) {
                        if (xxx.someFuncRequest == data.id) {
                            callback(data);
                        }
                    }).error(function(data, status) {
                callback(data);
            });
        }

Collectives™ on Stack Overflow

How to implement an auto search in angular?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related