live search with angularjs

Question

In my angularjs app http://1ffa3ba638.url-de-test.ws/zombieReport/popup.html#/lord i try to make a live instant search : i want nothing show at starting and search start when two letters minimum is writed. And after the searching is again performed for 3 or more letters, new query for each new letter.

/* INIT .myForm */
$scope.myForm_lord = {};
$scope.posts = {};

/* AJAX POST QUERY : calling lord watching */
$scope.$watch('myFormZR_lord.$valid', function() {

        // ng-show things
        $scope.successLordZR = true;

        // RETRIEVE DATAS
        var dataName = $scope.myForm_lord.search;

        // CONSOLE LOG CONTROL
        console.log(defineCLC + "LORD search requested by name : " + dataName);

        // $resource
        var Post = $resource(
            urlLordRest, 
            {name: dataName}, 
            {'query': {method: 'GET', isArray: true, cache: false, headers: {'Accept': 'application/json'}}}
        );
        $scope.posts = Post.query();
        console.log($scope.posts);

});

html:

        <form name="myFormZR_lord" id="myFormZR_lord" class="form-horizontal" role="form" novalidate="">
            <div class="form-inline form-inline-sm">

                <!-- form search -->
                <div class="input-group">
                    <input class="form-control" name="search" type="text" ng-required="true" minlength="2" ng-minlength="2" ng-model="myForm_lord.search" placeholder="{{ 'TRS_CTRL3_FORM1' | translate }}" autocomplete="off" />
                </div>

            </div>
            <span class="myForm_error" ng-show="myFormZR_lord.$invalid">{{ 'TRS_CTRL3_FORM2' | translate }}</span>
        </form>

        <div ng-show="successLordZR">
            <p>{{ 'TRS_CTRL3_TEXT1' | translate }} :</p>
            <ul>
                <li ng-repeat="post in posts">                    
                    <p>{{post.prefixe}} {{post.name}}</p>                                        
                </li>
            </ul>
        </div>

Problem is actually results are showing at starting, and there is only a query for two letters, not if we put 3 or more. And the query is executed two times (see console log), what's wrong ? i use $watch, it's not good ?

sahbeewah · Accepted Answer · 2014-08-22 06:16:44Z

1

You are watching for the change in the validity of the form. You put in minlength as 2 so as soon as you type in two characters the form becomes valid and thus fires your request. As soon as you backspace from 2 to 1 characters there is a change of validity again and thus firing another request. Instead of watching for the form validity, watch for changes in the form.

answered Aug 22, 2014 at 6:16

sahbeewah

2,6901 gold badge15 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

live search with angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related