点击后输入框上的Jquery自动完成答案

【问题标题】：Jquery Autocomplete on input box after click点击后输入框上的Jquery自动完成
【发布时间】：2016-10-31 15:24:17
【问题描述】：

我正在尝试对多个输入使用自动完成功能。当我单击一个按钮时，所有输入都会显示出来。我正在尝试使用类来做到这一点。这是 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
    });

};

自动完成功能不适用于输入框。也欢迎其他建议这样做。提前致谢！

【问题讨论】：

元素被动态添加到 DOM 中。这可能是个问题。使用比 jQuery 更复杂的东西 - jsfiddle.net/swfjT/5205
我是这么认为的。我无法想出一个替代方案来做我想做的事。

标签： jquery html angularjs autocomplete angular-material

【解决方案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);
                }

【讨论】：