how to view the data when searching without submitting | angularjs

Question

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 view

zabusa · Accepted Answer · 2017-12-24 15:16:11Z

1

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);
}

edited Dec 24, 2017 at 15:16

answered Dec 24, 2017 at 14:27

zabusa

2,72926 silver badges26 bronze badges

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

7 Comments

Ali Over a year ago

well, but what to do with the "ng-model="searchVal", shouldn't be used somewhere else?

Ali Over a year ago

i am very new to angular js

zabusa Over a year ago

@AlyAlAmeen if you use ng-model="searchVal" then no need to use the var searchKeyWord=$("#searchInput").val(); function to get the input value

Ali Over a year ago

but i have no component have the name "searchVal" in both html and the angularjs function, so how the anuglarjs function will take the search input without any definition of the "searchVal" in it? not even the controller, i made some edits to the question, i added the js controller

zabusa Over a year ago

@AlyAlAmeen there is a service for api call,$http check it.

|

Collectives™ on Stack Overflow

how to view the data when searching without submitting | angularjs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related