JQuery Autocomplete на поле ввода после нажатия

Question

Я пытаюсь использовать автозаполнение на нескольких входах. Все входы будут отображаться при нажатии кнопки. Я пытаюсь сделать это с помощью класса. Вот HTML:

<div layout = "row" ng-repeat="project in projects">  
    <div layout = "column" layout-align="center center" flex="33"> 
     <md-input-container> 
      <label>Project Name</label> 
       <input class="autoc" type="text" placeholder="{{project.id}}" ng-keyup="myFunct($event)"> 
     </md-input-container> 
    </div> 
</div> 

Вот мой контроллер код- При нажатии на кнопку функции setCity вызывается. Он заполняет массив проектов, а внутри него записывается код jquery.

$scope.items = ['item1', 'item2', 'item3']; 

$scope.setCity =function(cityname) { 
    $scope.projects = []; 
    for (var key in $scope.list) { 
     if ($scope.list[key].city == cityname.toLowerCase()) { 
      $scope.projects.push($scope.list[key]); 
     } 
    } 

    $(".autoc").autocomplete({ 
     autoFocus: true, 
     source: $scope.items 
    }); 

}; 

Автозаполнение не работает с полями ввода. Другие предложения для этого также приветствуются. Спасибо заранее!

Answer 1

1 вы должны принять множественный ввод в HTML код в одном классе

<div ng-app='MyModule'> 
    <div ng-controller='DefaultCtrl'> 
     <input auto-complete ui-items="names" ng-model="selected"> 
     <input auto-complete ui-items="names" ng-model="selected"> 
     selected = {{selected}} 
    </div> 
</div> 

2 - использовать Js код

angular.module('MyModule', []).directive('autoComplete', function($timeout) { 
    return function(scope, iElement, iAttrs) { 
      iElement.autocomplete({ 
       source: scope[iAttrs.uiItems], 
       select: function() { 
        $timeout(function() { 
         iElement.trigger('input'); 
        }, 0); 
       }