1
ありがとうございました。Googleマップのオートコンプリートサービスを使った角度指示md-autocomplete
私は、角度を使ってGoogle AutocompleteService APIとやりとりするオートコンプリート検索ボックスセットアップを取得しようとしています。
現在、私の角オートコンプリートサービスはうまくいき、検索バーに入力されたものに基づいて提案された予測の配列を取得しています。ここで
は私のオートコンプリート・サービスである：
angular
.module('LocalKnowledgeApp')
.service('AutocompleteService', [ function() {
var self = this;
var suggestions = [];
self.initPredict = function(searchInput) {
var predict = new google.maps.places.AutocompleteService();
predict.getQueryPredictions({ input: searchInput }, self.displaySuggestions);
};
self.displaySuggestions = function(predictions, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
console.log(status);
return;
}
predictions.forEach(function(prediction) {
suggestions.push(prediction.description);
});
};
self.makeSuggestions = function(){
return suggestions.slice(0,10);
};
サービスは、私はオートコンプリートに接続しようとしているフォームを制御する制御装置に注入されていること。 （私はオートコンプリートビットに関与し、AutocompleteServiceと相互作用している機能のみを含めました）
angular
.module('LocalKnowledgeApp')
.controller('RequestController', ['LocationService', 'MarkersService', 'AutocompleteService', '$http', '$scope',
function(LocationService, MarkersService, AutocompleteService, $http, $scope) {
var self = this;
var isInfoOpen = false;
var clickedRequest = {};
var requestUser = {};
var autocompleteStarted;
self.master = {};
var autocompleteSuggestions = [];
// var search = autoCompleteSearch;
self.autoCompleteSearch = function(searchInput){
if (searchInput.length < 2) {
self.autocompleteStarted = false;
} else {
AutocompleteService.initPredict(searchInput);
self.autocompleteStarted = true;
self.autocompleteSuggestions = AutocompleteService.makeSuggestions();
return self.autocompleteSuggestions;
}
};
私は今、ユーザーができるように、検索バーのドロップダウンボックスを取得するように配線しようとしていますGoogle AutocompleteサービスがRequestsControllerに返す提案の配列から選択します。
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request a tour from a local</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="location">Location</label>
<div>
<md-autocomplete
md-search-text-change="r.autoCompleteSearch(searchText)"
md-input-name="request.location"
md-selected-item="selectedItem"
md-search-text="searchText"
md-items="item in r.autocompleteSearch(searchText)"
md-item-text="item.display"
md-input-minlength="0">
<md-item-template md-highlight-text="searchText">
{{item.display}}
</md-item-template>
</div>
</md-autocomplete>
<aside ng-show="r.autocompleteStarted" id="autocompleteSuggestions">
<ul ng-repeat="suggestion in r.autocompleteSuggestions track by $index"> {{suggestion}} </ul>
<aside>
</div>
私はngMaterialモジュールを注射し、適切な場所に必要なすべての亭コンポーネントを持っている - ディレクティブは、入力に応答するので、私はこのことを知っているが、それだけで灰色のボックスが表示されます。
(function() {
'use strict';
angular
.module('LocalKnowledgeApp', ['ngResource', 'ngMaterial']);
}());
これは私のWebページのような探しているものです...
[![Odd Grey Box[1]](https://i.stack.imgur.com/lurBk.png)
感謝すべてのヘルプ！