javascript — автозаполнение угловых материалов
Я пытаюсь автозаполнить мою форму, используя угловые материалы. Здесь я хочу, чтобы автозаполнение формы ввода. Чтобы отобразить предложения, я хочу отобразить названия акций и символы. Я получаю данные о запасах из следующего API:
http://dev.markitondemand.com/MODApis/Api/v2/Lookup/json?input=A
Всякий раз, когда я набираю новый алфавит, новый текст берется, и новый текст передается функции searchTextChange в моем коде. Функция searchTextChange делает ajax-вызов PHP-скрипта, который работает на сервере. Скрипт PHP вызывает API с новым текстом в качестве параметра и возвращает данные JSON, возвращаемые API. Итак, в конечном итоге моя функция searchTextChange возвращает данные JSON. Я могу записать эти данные JSON на консоль.
Теперь проблема в том, что я не могу отображать данные в качестве предложений. Какие изменения мне нужно сделать?
Вот мой HTML + угловой код:
<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";
}
?>
Это вывод, который я получаю:
Решение
сохранить результат в области:
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;
});
};
}
Другие решения
Других решений пока нет …