Question

app.js

$scope.add = function () {
  $('#btn').click(function() {
  // insert a SPAN tag with class="spn" at the end in all DIVs with      class="cls"
     $scope.data=[];
     var add=' <input type="text" name="currency" id="autocomplete">' ;
     $('div.cls').append(add);
     i++;
     $scope.count++;
  });
}

$scope.autocomplete=function(){
  var currencies = [
    { value: 'Afghan afghani' },
    { value: 'Albanian lek'},
    { value: 'Algerian dinar'},
    { value: 'European euro' }
  ];

  // setup autocomplete function pulling from currencies[] array
  $('#autocomplete').autocomplete({
    lookup: currencies,
  });
}

HTML

<div class="cls" id="idd"></div>
<button type="button" class="btn btn-default btn-sm" id="btn"> 
  <span class="glyphicon glyphicon-plus"></span> Add
</button>

此自动完成功能在不使用附加的情况下运行..但是当我在上面附加文本字段后使用它时它不起作用。任何人都可以帮助我。

Answer 1

此示例向您展示如何使用Angular创建自动完成，而不使用jQuery自动完成。

var app = angular.module("app", []);
        app.controller("ctrl", function ($scope, $filter) {

            $scope.suggestions = [];

            $scope.selectedData = [];

            $scope.defaultData = [
                { value: "Afghan afghani" },
                { value: "Albanian lek" },
                { value: "Algerian dinar" },
                { value: "European euro" }
            ];

            $scope.search = function () {
                var length = $scope.autocomplete.length;
                if (length === 0) {
                    $scope.suggestionsNotFound = false;
                    $scope.suggestions = [];
                } else {
                    var result = $filter("filter")($scope.defaultData, { value: $scope.autocomplete });
                    $scope.suggestions = result;
                    $scope.suggestionsNotFound = false;
                    if (result.length === 0) {
                        $scope.suggestionsNotFound = true;
                    }
                }

                ///select
                $scope.select = function (item) {
                    var isExist = $filter("filter")($scope.selectedData, { value: item.value }, true)[0];
                    if (!isExist) {
                        $scope.selectedData.push(item);
                        $scope.autocomplete = null;
                        $scope.suggestions = [];
                    }
                }

                ///remove
                $scope.remove = function (index) {
                    $scope.selectedData.splice(index, 1);
                }

            }



        });

        .autocomplete span {
            margin-left: 5px;
        }

            .autocomplete span i {
                color: red;
                cursor: pointer;
            }

<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
   <div class="container">
        <div class="autocomplete">
            <input class="form-control" type="text" ng-model="autocomplete" ng-change="search()" />
            <div class="clearfix"></div>
            <span class="label label-default" ng-repeat="data in selectedData">
                {{data.value}}
                <i ng-click="remove($index)" class="glyphicon glyphicon-remove"></i>
            </span>

            <ul class="list-group">
                <li class="list-group-item" ng-repeat="suggestion in suggestions" ng-click="select(suggestion)">
                    {{suggestion.value}}
                </li>
            </ul>
            <div class="alert alert-info" ng-if="suggestionsNotFound">
                <b>[{{autocomplete}}] not found!</b>
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</body>
</html>

追加文本字段并使用jquery使其自动完成

1 个答案: