角材料自动完成答案

【问题标题】：Angular materials autocomplete角材料自动完成
【发布时间】：2017-11-08 06:20:00
【问题描述】：

我正在尝试使用 Angular 材料自动完成我的表单。在这里，我想自动完成输入表单。对于要显示的建议，我想显示股票名称和代码的名称。我从以下 API 获取股票数据：
http://dev.markitondemand.com/MODApis/Api/v2/Lookup/json?input=A

每当我输入一个新字母时，都会采用新文本并将新文本传递给我代码中的 searchTextChange 函数。 searchTextChange 函数对在后端工作的 PHP 脚本进行 ajax 调用。 PHP 脚本以新文本作为参数调用 API，并返回 API 返回的 JSON 数据。所以，最终我的 searchTextChange 函数返回 JSON 数据。我能够将此 JSON 数据记录到控制台。

现在，问题是，我无法将数据显示为建议。我需要做哪些改变？

这是我的 HTML + Angular 代码：

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script language = "javascript">
          var finalData;
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('autoCompleteController', autoCompleteController);function autoCompleteController ($timeout, $q, $log) {
            var self = this; self.isDisabled    = false;
             self.selectedItemChange = selectedItemChange;
            self.searchTextChange   = searchTextChange;
            function searchTextChange(text) {
               $log.info('Text changed to ' + text);
                var str = text;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                  finalData = this.responseText;
                console.log(finalData);
                return finalData;
            }
        }
        xmlhttp.open("GET", "Auto.php?q="+str, true);
        xmlhttp.send();
    }
    function selectedItemChange(item) {
               $log.info('Item changed to ' + JSON.stringify(item));
            }  
         }  
      </script>
   </head>
    <body ng-app = "firstApplication" ng-cloak>
      <div ng-controller = "autoCompleteController as ctrl" layout = "column" ng-cloak>
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <p><code>md-autocomplete</code> can be used to provide search results from
               local or remote data sources.</p><md-autocomplete
                  ng-disabled = "ctrl.isDisabled"
                  md-no-cache = "ctrl.noCache"
                  md-selected-item = "ctrl.selectedItem"
                  md-search-text-change = "ctrl.searchTextChange(ctrl.searchText)"
                  md-search-text = "ctrl.searchText"
                  md-selected-item-change = "ctrl.selectedItemChange(item)"
                  md-items = "item in ctrl.searchTextChange(ctrl.searchText)"
                  md-item-text = "item.symbol"
                  md-min-length = "1"
                  placeholder = "eg.AAPL"> <md-item-template>
                     <span md-highlight-text = "ctrl.searchText"
                        md-highlight-flags = "^i">{{item.symbol}}</span>
                  </md-item-template> <md-not-found>
                     No states matching "{{ctrl.searchText}}" were found. </md-not-found>
               </md-autocomplete>
               <br/>
            </form>
         </md-content>
      </div>
   </body>
</html>

这是我的 PHP 代码：

<?php
//header("Access-Control-Allow-Origin:*","Content-Type:application/json");
if($_SERVER['REQUEST_METHOD'] == "GET") {
    $q = $_GET['q'];
    // echo "Now process for " .$q;
    $APICall = "http://dev.markitondemand.com/MODApis/Api/v2/Lookup/json?input=".$q;

    $response = file_get_contents($APICall);
    echo $response;


}
else {
    echo "Not get method";
}
?>

这是我得到的输出：

【问题讨论】：

标签： javascript php angularjs angular-material angular-material2

【解决方案1】：

将结果保存在范围内：

   var finalData;
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('autoCompleteController', autoCompleteController);function autoCompleteController ($timeout, $q, $log,$scope) {
            var self = this; self.isDisabled    = false;
             self.selectedItemChange = selectedItemChange;
            self.searchTextChange   = searchTextChange;
            function searchTextChange(text) {
               $log.info('Text changed to ' + text);
                var str = text;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                  finalData = this.responseText;
                console.log(finalData);
                $scope.finalData =  finalData;
                //----^ here
            }
        }
        xmlhttp.open("GET", "Auto.php?q="+str, true);
        xmlhttp.send();
    }
    function selectedItemChange(item) {
               $log.info('Item changed to ' + JSON.stringify(item));
            }  
         }

将循环更改为：

md-items = "item in ctrl.finalData"

你最好像这样使用 $http：

<md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in query(ctrl.searchText)" md-item-text="item.Symbol">
  <md-item-template>
     <span md-highlight-text="searchText">{{item.Symbol + " - " + item.Name + " ("+ item.Exchange +")" }}</span>
  </md-item-template>
</md-autocomplete>

function autoCompleteController($scope, $http) {
  $scope.query = function(searchText) {
    return $http
      .get("Auto.php?q=" + searchText)
      .then(function(data) {
        return data.data;
      });
  };
}

【讨论】：

没有建议出现。您可以在这里查看我的页面：cs-server.usc.edu:25078/Trial3.html
您是否将 $scope 添加到您的控制器 autoCompleteController ($timeout, $q, $log,$scope) 中？
我将 $scope 添加到控制器，没有更多错误。但是没有建议出现。我得到了一个加载...栏来代替我的建议。在这里看看我的实现：cs-server.usc.edu:25078/Trial3.html
ups，我的错，你已经命名了你的控制器，查看更新的答案
太棒了！！工作。你太棒了！！