Javascript 如何在angular js中获得自动完成？_Javascript_Jquery_Angularjs

Javascript 如何在angular js中获得自动完成？

javascript jquery angularjs

Javascript 如何在angular js中获得自动完成？,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我有一个包含名称和id的对象。我只想根据名称进行自动完成。我已经尝试了如下所示的代码 //Js file var app=angular.module("myapp",[]); app.controller("controller",['$scope',function($scope){ $scope.persons=[ { Name:"Bhavani", Id:67 }, {

我有一个包含名称和id的对象。我只想根据名称进行自动完成。我已经尝试了如下所示的代码

//Js file
var app=angular.module("myapp",[]);
app.controller("controller",['$scope',function($scope){
    $scope.persons=[
                    {
            Name:"Bhavani",
            Id:67
    },
    {
        Name:"Mamata",
        Id:66
    },
    {
        Name:"Prasanna",
        Id:65
    },
    {
        Name:"Ramya",
        Id:64
    },
    {
        Name:"Navya",
        Id:63
    }
    ];
    $scope.complete=function(){
        $("#autocomp").autocomplete({
            source: $scope.persons.Id
        });
    };
}]);

//Html文件

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">
    <div ng-repeat="p in persons">{{p.Name}}
    </div>
     <div class="ui-widget">
    <input type="text" id="autocomp" ng-keyup="complete()">
    </div>
</body>
</html>


基于名称自动完成
{{p.Name}}

上面的代码可能有一些错误。它没有得到我想要的输出。有人能帮我解决这个问题吗。

这就是在AngularJS项目中使用jQuery API的方式（我相信）。无论何时您在执行DOM操作或jQuery操作，都应该将它放在

链接：function（）{}

via指令中

代码的主要问题可能是

源代码：$scope.persons.Id

只是一个数字。

sourc

e需要是一个字符串数组（至少根据文档）。因此，我将所有姓名从您的

人员

数组中分离出来，并将它们放入一个新数组

人员姓名

    <!doctype html>
    <html lang="en" ng-app="myapp">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

      <script src="vendors/angular.min.js"></script>
    </head>
    <body ng-controller="controller">

        <div ng-repeat="p in persons">{{p.Name}}
        </div>

        <div class="ui-widget">
          <input type="text" id="tags" autocomplete-directive>
        </div>

      <script>
        var app = angular.module("myapp",[]);

    app.controller("controller",['$scope',function($scope){
        $scope.persons=[
                        {
                Name:"Bhavani",
                Id:67
        },
        {
            Name:"Mamata",
            Id:66
        },
        {
            Name:"Prasanna",
            Id:65
        },
        {
            Name:"Ramya",
            Id:64
        },
        {
            Name:"Navya",
            Id:63
        }
        ];

      // array of only strings autocomplete
      $scope.peopleNames = [];

      for(var i = 0, j = $scope.persons.length; i < j; i++) {
        $scope.peopleNames.push($scope.persons[i].Name);
      }

    }]);

        app.directive('autocompleteDirective', [function($scope) {
          return {
            link: function(scope, element, attrs) {
              element.autocomplete({
                source: scope.peopleNames
              });
            }
          };
        }]);
      </script>
    </body>

    </html>


jQuery UI自动完成-默认功能
{{p.Name}}
var-app=angular.module（“myapp”，[]）；
app.controller（“controller”、[“$scope”、函数（$scope）{
$scope.person=[
{
姓名：“巴瓦尼”，
身份证号码：67
},
{
姓名：“Mamata”，
身份证号码：66
},
{
名称：“普拉桑纳”，
身份证号码：65
},
{
姓名：“拉姆亚”，
身份证号码：64
},
{
姓名：“纳维亚”，
身份证号码：63
}
];
//仅字符串数组自动完成
$scope.peopleNames=[]；
对于（变量i=0，j=$scope.persons.length；i

像这样试试，
HTML:
工作
谢谢大家给我建议答案。我也用另一种方式做了。这可能会对其他人有所帮助
//html file

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="angularfiles/bootstrap-theme.css"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">


<div ng-repeat="p in persons">{{p}}</div>
        <div class="ui-widget">
          <input type="text" ng-model="selected" typeahead="p.Name for p in persons | filter:$viewValue">

        </div>
</body>
</html>

//js file

var app = angular.module("myapp",['ui.bootstrap']);

    app.controller("controller",['$scope',function($scope){

        $scope.persons=[
                        {
                Name:"Bhavani",
                Id:67
        },
        {
            Name:"Mamata",
            Id:66
        },
        {
            Name:"Prasanna",
            Id:65
        },
        {
            Name:"Ramya",
            Id:64
        },
        {
            Name:"Navya",
            Id:63
        }
        ];

    }]);

//html文件
基于名称自动完成
{{p}
//js文件
var-app=angular.module（“myapp”['ui.bootstrap']）；
app.controller（“controller”、[“$scope”、函数（$scope）{
$scope.person=[
{
姓名：“巴瓦尼”，
身份证号码：67
},
{
姓名：“Mamata”，
身份证号码：66
},
{
名称：“普拉桑纳”，
身份证号码：65
},
{
姓名：“拉姆亚”，
身份证号码：64
},
{
姓名：“纳维亚”，
身份证号码：63
}
];
}]);
这就是您想要使用的吗？尝试使用angularjs，因为您使用的是angularjs。这是链接：。是的，但我在对象名称和id中有一个字段。所以我正在尝试通过名称或id@superveetz执行自动完成。不要浪费时间重新发明轮子使用类似的东西：我只想根据我要求的上述代码中的名称执行自动完成
var app = angular.module("myapp",[]);
app.controller("controller",function($scope){
  $scope.availableTags = [
     {
            Name:"Bhavani",
            Id:67
    },
    {
        Name:"Mamata",
        Id:66
    },
    {
        Name:"Prasanna",
        Id:65
    },
    {
        Name:"Ramya",
        Id:64
    },
    {
        Name:"Navya",
        Id:63
    }
    ];

}).directive("autoComplete",function(){
  return function(scope,element,attrs){
    var names =$.map(scope.availableTags,function(value){   return value.Name;          
 });
      element.autocomplete({
      source: names
    });


    };
});

//html file

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="angularfiles/bootstrap-theme.css"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">


<div ng-repeat="p in persons">{{p}}</div>
        <div class="ui-widget">
          <input type="text" ng-model="selected" typeahead="p.Name for p in persons | filter:$viewValue">

        </div>
</body>
</html>

//js file

var app = angular.module("myapp",['ui.bootstrap']);

    app.controller("controller",['$scope',function($scope){

        $scope.persons=[
                        {
                Name:"Bhavani",
                Id:67
        },
        {
            Name:"Mamata",
            Id:66
        },
        {
            Name:"Prasanna",
            Id:65
        },
        {
            Name:"Ramya",
            Id:64
        },
        {
            Name:"Navya",
            Id:63
        }
        ];

    }]);