Question

搜索表单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>

Answer 1

嗨请在plunker中查看此示例[link：http://plnkr.co/edit/6kuVR4?p=preview] 希望它有所帮助。

的js

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>

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

Answer 2

使用ng-change找到的解决方案调用表单提交的相同功能

＆＃13;

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

＆＃13;

<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>

＆＃13;

键入xmlhttprequest函数而不是表单提交

2 个答案: