AngularJS [SOLVED]: how to view the data when searching without submitting | angularjs

AngularJS [SOLVED]: how to view the data when searching without submitting | angularjs

Home Forums Frameworks AngularJS tutorials AngularJS [SOLVED]: how to view the data when searching without submitting | angularjs

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #246227

    Cloudy Point
    Keymaster

    QuestionQuestion

    in order to make the search process faster, my client requested to view the data when just the search box is filled without even submitting, my code works fine at submitting, what should i change with my code so i can get the desired result. this is my first project with angular js, i am very new to this technology. Many thanks in advance.

    HTML View:
    <input id="searchInput" type="text"/> // search box where
    
    // the function below "getSearchResults()" will get results when submitting 
    <input ng-click="getSearchResults()" type="submit"/>
    
    <table>
        <thead>
            <tr> 
                <th>NOM</th>
                <th>TELEPHONE</th>
                <th>LOCATION</th>
                <th>CODE</th>
            </tr>
        </thead>
        <tbody >
    
            //view the data
            <tr ng-repeat="c in clients">
                <td>{{c.firstname}} {{c.lastname}}</td>
                <td>{{c.telephone}}</td>
                <td>{{c.location}}</td>
                <td>{{c.code}}</td>
            </tr>
        </tbody>
    </table>
    
    Js source:
    
    
    var app = angular.module('DMDGroup', []);
    $scope.clients;
    app.controller('ClientALL', function($scope, $http) {
    
    /* the function put all results in the scope variable (client) in a json 
         form and the results viewed with the ng-repeat on the tr tag*/
    
    $scope.getSearchResults=function(){
        var searchKeyWord=$("#searchInput").val();
        var url = '../php/clients.php';
        var data = {"function":"getClients",
                "searchKeyWord":searchKeyWord};
    
        var options={
            type : "get",
            url : url,
            data: data,
            dataType: 'json',
            async : false,
            cache : false,
            success : function(response,status) {
                $scope.clients = response;
                $scope.$apply();
            },
            error:function(request,response,error){
                alert("Error: " + error + ". Please contact developer");
            }
        };
        $.ajax(options);
    }
    }
    

    i want the to directly change the data in the table depends on the search results, i’ll attach an image of my viewi want the result to be viewed in the table as the if i submit, not like the data list

    #246228

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    put ng-change instead of ng-click

    <input ng-change="getSearchResults(searchVal)" ng-model="searchVal" class="searchClientBtn" type="submit"/>
    

    in controller function

    $scope.getSearchResults=function(value){
        var url = '../php/clients.php';
        var data = {"function":"getClients",
                "searchKeyWord": value};
    
        var options={
            type : "get",
            url : url,
            data: data,
            dataType: 'json',
            async : false,
            cache : false,
            success : function(response,status) {
                $scope.clients = response;
                $scope.$apply();
            },
            error:function(request,response,error){
                alert("Error: " + error + ". Please contact developer");
            }
        };
        $.ajax(options);
    }
    

    Source: https://stackoverflow.com/questions/47961396/how-to-view-the-data-when-searching-without-submitting-angularjs
    Author: zabusa
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.