How to implement server-side search box in AngularJS

Question

What is a fast and efficient way to implement the server-side component for an autocomplete feature in an html input box using AngularJS?

I want to implement functionality like we can set a timer task that gets reset after every key stroke, with a .5 second delay. This way if a user types multiple characters fast it doesn't query the index every stroke, only when the user pauses for a second.

Currently, I am using this code-

In Html-

<input class="form-control" ng-model="Search" ng-change="SearchResults(Search)" type="text" />

And My javascript code is-

$scope.SearchResults = function (SearchText) {
        $scope.Request = new Request();
        $scope.Request.Criteria = "[{Key:'SearchText', Value:'" + SearchText + "'}]";
        projectRepository.get($scope.Request.get(), function (data) {
            $scope.Projects = data.Data;
            $scope.Request.set(data);  
        })
    }

Thanks in advance.

RSquared · Accepted Answer · 2014-10-13 05:44:13Z

2

Before sending off the get request, I would create a timeout which gets cleared each time you type in the input box. Something like this:

var promise;
$scope.SearchResults = function (SearchText) {
    if(promise) $timeout.cancel(promise);

    promise = $timeout(function(){
        // do service call
        alert(SearchText);           
    }, 500);
}

JSFiddle: http://jsfiddle.net/o4ntvvdg/

Note that there should be some logic which cancel old requests every time the user sends off a new request. Otherwise you would need to queue them and figure out which one is the latest one.

EDIT: Fixed wrong description to solution

edited Oct 13, 2014 at 5:44

answered Oct 13, 2014 at 5:39

RSquared

1,20811 silver badges19 bronze badges

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

2 Comments

Amit Agarwal Over a year ago

but when i am deleting or press backspace fastly then show the complete list at time(display for less then 0.2 sec) and then again display the particular text result.

Amit Agarwal Over a year ago

Sorry I have mistaken.. Your solution is working like a charm... :)

Collectives™ on Stack Overflow

How to implement server-side search box in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related