Javascript 如何在搜索时查看数据而不提交| angularjs

为了使搜索过程更快，我的客户要求在搜索框填满时查看数据，甚至不提交，我的代码在提交时工作正常，我应该用代码更改什么，以便获得所需的结果。这是我使用angular js的第一个项目，我对这项技术非常陌生。非常感谢

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

HTML视图：
//搜索框在哪里
//“getSearchResults（）”下面的函数将在提交时获取结果
笔名
电话
地方
密码
//查看数据
{{c.firstname}{{c.lastname}}
{{c.电话}
{{c.location}}
{{c.code}}
Js资料来源：
var app=angular.module（'DMDGroup'，[]）；
$scope.clients；
app.controller（'ClientALL'，函数（$scope，$http）{
/*该函数将所有结果放在json中的范围变量（客户端）中
使用tr标签上的ng repeat查看表格和结果*/
$scope.getSearchResults=function（）{
var searchKeyWord=$（“#searchInput”）.val（）；
var url='../php/clients.php'；
var data={“函数”：“getClients”，
“searchKeyWord”：searchKeyWord}；
var期权={
键入：“获取”，
url:url，
数据：数据，
数据类型：“json”，
async:false，
cache:false，
成功：功能（响应、状态）{
$scope.clients=响应；
$scope.$apply（）；
},
错误：函数（请求、响应、错误）{
警报（“错误：“+错误+”。请联系开发人员”）；
}
};
$.ajax（选项）；
}
}

---

我希望根据搜索结果直接更改表中的数据，我将附加我视图的图像

put

ng change

，而不是

ng click

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

---

好吧，但如何处理“ng model=“searchVal”，不应该在其他地方使用？我对angular非常陌生js@AlyAlAmeen如果使用ng model=“searchVal”，则无需使用

var searchKeyWord=$（“#searchInput”）.val（）；

函数来获取输入值，但我没有名称为“searchVal”的组件在html和angularjs函数中，那么anuglarjs函数如何在没有任何“searchVal”定义的情况下接受搜索输入呢？甚至控制器都没有，我对这个问题做了一些编辑，我添加了jscontroller@AlyAlAmeen有一个api调用服务，

$http

检查它。

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