Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
​
​
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-app = "myapp">
    <div ng-controller="controller">
      <div class="ui-widget">
 
      <input type="text" id="autocomp" auto-complete>
        </div>
    </div>
  </div>
</body>
</html>
 
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
    });
    
​
    };
});
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers