Tyler Zika Tyler Zika - 1 month ago 8
AngularJS Question

Angular autocomplete not working

From the tutorial. The search box is styled correctly.

enter image description here

But when I type the drop down doesn't appear with the static data in my controller.

Here is my template.

<div class="container-fluid">

<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3">

<div class="panel panel-default panel-filter">
<div class="panel-heading">
<h3 class="panel-title">Calendar Filter</h3>
</div>
<div class="panel-body">

<div class="section section-filter">

<form ng-submit="$event.preventDefault()">
<div class="form-group" style="margin-bottom:0">
<div class="input-group input-group-sm addon-left">
<span class="input-group-addon">View By</span>
<select class="form-control" name="select_view" id="select_view">

<option value="taskown">Task Owner</option>
<option value="taskacc">Task Account</option>
</select>
</div>
</div>

<div class="form-group-taskown">
<div class="space15"></div>
<div class="form-group">
<div class="input-group input-group-sm addon-left">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<div class="autocompletedemoCustomTemplate">
<md-autocomplete
ng-disabled="taskCalendarCtrl.isDisabled"
md-no-cache="taskCalendarCtrl.noCache"
md-selected-item="taskCalendarCtrl.selectedItem"
md-search-text-change="taskCalendarCtrl.searchTextChange(taskCalendarCtrl.searchText)"
md-search-text="taskCalendarCtrl.searchText"
md-selected-item-change="taskCalendarCtrl.selectedItemChange(item)"
md-items="item in taskCalendarCtrl.querySearch(taskCalendarCtrl.searchText)"
md-item-text="item.name"
md-min-length="0"
placeholder=""
md-menu-class="autocomplete-custom-template">
<md-item-template>
<span class="item-title">
<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
<span> {{item.name}} </span>
</span>
<span class="item-metadata">
<span class="item-metastat">
<strong>{{item.watchers}}</strong> watchers
</span>
<span class="item-metastat">
<strong>{{item.forks}}</strong> forks
</span>
</span>
</md-item-template>
</md-autocomplete>
</div>




<!--
<input type="text" class="form-control" id="searchBox" name="typeahead_example_1" ng-model="searchBox" ng-change="change(text)" auto-complete ui-items="users">-->
</div>
</div>
</div>

</form>

</div><!--/section-->

</div>
</div>

</div>

<div class="col-sm-12 col-md-8 col-lg-6">
<div class="section section-calendar">
<div id='calendar'></div>
</div><!--/section-->
</div>

<div class="space20 hidden-lg"></div>
<div class="col-sm-12 col-sm-offset-0 col-md-8 col-md-offset-4 col-lg-3 col-lg-offset-0">
<div class="panel panel-default panel-tasks">
<div class="panel-heading">
<h3 class="panel-title">Tasks</h3>
</div>
<div class="list-group" ng-repeat="task in taskList | limitTo: 5">
<a href="{{task.url}}" class="list-group-item">
<span class="badge">{{task.status}}</span>
<h4 class="list-group-item-heading">{{task.heading}}</h4>
<ul class="list-unstyled">
<li><strong>Assigned To:</strong>{{task.assignedTo}}</li>
<li><strong>Releted To:</strong>{{task.relatedTo}}</li>
</ul>
</a>
</div><!--/list-group-->
</div>
</div>
</div><!--/row-->

</div> <!-- /container -->


and controller aka
taskCalendarCtrl


'use strict';
angular

.module('taskCalendar')


.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account', function($scope, task , user, account) {
}], taskCalendarCtrl);

function taskCalendarCtrl ($timeout, $q, $log) {
var self = this;

self.simulateQuery = false;
self.isDisabled = false;

self.repos = loadAll();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;

// ******************************
// Internal methods
// ******************************

/**
* Search for repos... use $timeout to simulate
* remote dataservice call.
*/
function querySearch (query) {
var results = query ? self.repos.filter( createFilterFor(query) ) : self.repos,
deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}

function searchTextChange(text) {
$log.info('Text changed to ' + text);
}

function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
}

/**
* Build `components` list of key/value pairs
*/
function loadAll() {
var repos = [
{
'name' : 'Angular 1',
'url' : 'https://github.com/angular/angular.js',
'watchers' : '3,623',
'forks' : '16,175',
},
{
'name' : 'Angular 2',
'url' : 'https://github.com/angular/angular',
'watchers' : '469',
'forks' : '760',
},
{
'name' : 'Angular Material',
'url' : 'https://github.com/angular/material',
'watchers' : '727',
'forks' : '1,241',
},
{
'name' : 'Bower Material',
'url' : 'https://github.com/angular/bower-material',
'watchers' : '42',
'forks' : '84',
},
{
'name' : 'Material Start',
'url' : 'https://github.com/angular/material-start',
'watchers' : '81',
'forks' : '303',
}
];
return repos.map( function (repo) {
repo.value = repo.name.toLowerCase();
return repo;
});
}

/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);

return function filterFn(item) {
return (item.value.indexOf(lowercaseQuery) === 0);
};

}
}


I get these errors when I click and type in the search box

more details on my error
enter image description here

enter image description here

Answer

You have your controller declaration wrong in your code.

The syntax of dependency injection of the controller is not correct.

it should be,

.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 
    'account','$timeout','$q','$log', function($scope, task , user, 
     account,$timeout,$q,$log) { 
}])

Here is the change in the complete file.

'use strict';
angular

.module('taskCalendar')
.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account','$timeout','$q','$log', function($scope, task , user, account,$timeout,$q,$log) {


var self = this;

self.simulateQuery = false;
self.isDisabled    = false;

self.repos         = loadAll();
self.querySearch   = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange   = searchTextChange;

// ******************************
// Internal methods
// ******************************

/**
 * Search for repos... use $timeout to simulate
 * remote dataservice call.
 */
function querySearch (query) {
  var results = query ? self.repos.filter( createFilterFor(query) ) : self.repos,
      deferred;
  if (self.simulateQuery) {
    deferred = $q.defer();
    $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
    return deferred.promise;
  } else {
    return results;
  }
}

function searchTextChange(text) {
  $log.info('Text changed to ' + text);
}

function selectedItemChange(item) {
  $log.info('Item changed to ' + JSON.stringify(item));
}

/**
 * Build `components` list of key/value pairs
 */
function loadAll() {
  var repos = [
    {
      'name'      : 'Angular 1',
      'url'       : 'https://github.com/angular/angular.js',
      'watchers'  : '3,623',
      'forks'     : '16,175',
    },
    {
      'name'      : 'Angular 2',
      'url'       : 'https://github.com/angular/angular',
      'watchers'  : '469',
      'forks'     : '760',
    },
    {
      'name'      : 'Angular Material',
      'url'       : 'https://github.com/angular/material',
      'watchers'  : '727',
      'forks'     : '1,241',
    },
    {
      'name'      : 'Bower Material',
      'url'       : 'https://github.com/angular/bower-material',
      'watchers'  : '42',
      'forks'     : '84',
    },
    {
      'name'      : 'Material Start',
      'url'       : 'https://github.com/angular/material-start',
      'watchers'  : '81',
      'forks'     : '303',
    }
  ];
  return repos.map( function (repo) {
    repo.value = repo.name.toLowerCase();
    return repo;
  });
}

/**
 * Create filter function for a query string
 */
function createFilterFor(query) {
  var lowercaseQuery = angular.lowercase(query);

  return function filterFn(item) {
    return (item.value.indexOf(lowercaseQuery) === 0);
  };

}

}

])
Comments