输入时使用xmlhttprequest函数而不是表单提交答案

【问题标题】：xmlhttprequest function while typing instead of form submit输入时使用xmlhttprequest函数而不是表单提交
【发布时间】：2014-11-03 21:08:33
【问题描述】：

搜索表单 xmlhttprequest 工作正常。

是否有任何选项可以在打字时使用此功能而不是提交表单？

function customersController($scope, $http) {
  $scope.search = function() {
    $scope.url = 'http://www.vanmaram.com/json_result.php?en=' + $scope.keywords;
    $http.get($scope.url).
    success(function(data, status) {
      $scope.status = status;
      $scope.data = data;
      $scope.result = data; // Show result from server in <li> element
    }).
    error(function(data, status) {
      $scope.data = data || "Request failed";
      $scope.status = status;
    });
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-csp ng-controller="customersController">
  <form style="position:relative;" ng-submit="search()">
    <input type="search" placeholder="Type english word" ng-model="keywords">
    <input type="submit" value="Search">
  </form>
  <ul>
    <li ng-repeat="word in result | limitTo:9">{{ word }}</li>
  </ul>
</div>

【问题讨论】：

呃...使用 ng-change 或 ng-keydown 代替 ng-submit？您是一位经验丰富的用户 - 您应该能够搜索此类内容，而无需自己提出新问题。
@Benjamin Gruenbaum 感谢您的建议，我是 AngularJS 的新手。
对，但不是软件开发——你在 Stack Overflow 中有超过 100 个答案和 100 个问题。请花点时间搜索 - “Angular call function keydown”的第一个搜索结果返回相关结果。

标签： javascript ajax angularjs forms xmlhttprequest

【解决方案1】：

嗨，请在 plunkr [链接：http://plnkr.co/edit/6kuVR4?p=preview] 希望对您有所帮助。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.selected = "";
  $scope.countries = ["India", "Australia", "Japan"];
});



app.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

在 HTML 中

<body ng-controller="MainCtrl">
  <p>Countries {{countries|json}}!</p>
  <div ng-app="MyModule">
    <div>
      <input auto-complete="" ui-items="countries" ng-model="selected" />selected = {{selected}}
    </div>
  </div>
</body>

使用的库 jqueryui/1.8.16/jquery-ui.js

【讨论】：

【解决方案2】：

使用ng-change找到的解决方案调用了相同的表单提交函数

function customersController($scope, $http) {
  $scope.suggestword = function(argument) {
    $scope.url = 'http://www.vanmaram.com/ajax_json_suggestion.php?en=' + $scope.keywords; // The url of our search
    $http.get($scope.url).
    success(function(data, status) {
      $scope.status = status;
      $scope.data = data;
      $scope.suggetionresult = data; // Show result from server in <li> element
      $scope.result = null;
    }).
    error(function(data, status) {
      $scope.data = data || "Request failed";
      $scope.status = status;
    });
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-csp ng-controller="customersController">
  <form style="position:relative;" ng-submit="search()">
    <input type="search" placeholder="Type english word" ng-model="keywords" ng-change="suggestword()">
    <input type="submit" value="Search">
  </form>
  <ul ng-if='result.length'>
    <li ng-repeat="word in result | limitTo:9">{{ word }}</li>
  </ul>
  <div id="suggestion" ng-if='suggetionresult.length > 1'>
    Suggestions: <a ng-repeat="word in suggetionresult | limitTo:9">{{ word }}</a>
  </div>
</div>

【讨论】：