<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.5.0/angular.js"></script>
<script src="//code.angularjs.org/1.5.0/angular-aria.js"></script>
<script src="//code.angularjs.org/1.5.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"/>
<script>
angular.module('myapp', ['ngMaterial']).controller("autocompleteController", function ($http) {
this.querySearch = function (query) {
return $http.get("https://jsonplaceholder.typicode.com/users")
.then(function (response) {
return response.data;
})
}
});
</script>
</head>
<body ng-app='myapp' ng-controller="autocompleteController as ctrl">
<div class="container" layout="row">
<md-input-container class="md-whiteframe-4dp">
<md-autocomplete flex
md-select-on-match="true"
md-autofocus="true"
md-autoselect="true"
md-selected-item="item.name"
md-search-text="ctrl.searchText"
md-search-text-change="ctrl.querySearch(ctrl.searchText)"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.name"
md-delay="300"
md-floating-label="Nome do Paciente">
<div layout="row" class="item" layout-align="start center">
<span md-highlight-text="ctrl.searchText">{{item.name}}</span>
</div>
</md-autocomplete>
</md-input-container>
</div>
</body>
</html>
// Code goes here
/* Styles go here */