Làm cách nào để thực hiện thả xuống tự động hoàn thành dưới dạng lưới trong angularJS?

Question

Ở đây tôi tạo mẫu cho autocomplete, được làm việc tốt và tôi cần phải làm một số thay đổi trên this.currently nó hoạt động như thế này

nhưng những gì tôi biết chính xác cần là tôi cần phải hiển thị menu thả xuống như chế độ hiển thị theo ô. một số như thế này

có thể bất kỳ một sự giúp đỡ về vấn đề này? .. nhờ

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

 
    app.controller('TypeaheadCtrl', function ($scope, $http, limitToFilter, filterFilter) { 
 

 
    
 
    $scope.sample_data = [{ 
 
     "name": "Nelson", 
 
     "designation":"Senior Developer", 
 
     "company": "acme", 
 
     "companydisplay": "abc" 
 
     }, 
 
     { 
 
     "name": "suresh", 
 
     "designation":"Developer", 
 
     "company": "acme", 
 
     "companydisplay": "def" 
 
     }, 
 
     { 
 
     "name": "Naresh", 
 
     "designation":"Developer", 
 
     "company": "acme", 
 
     "companydisplay": "xyz" 
 
     }]; 
 

 
    $scope.filtered_sample_data = function (search) { 
 
     var filtered = filterFilter($scope.sample_data, search); 
 
     
 
     var results = _(filtered) 
 
     .groupBy('company') 
 
     .map(function (g) { 
 
      g[0].initial = true; // the first item in each group 
 
      return g; 
 
     }) 
 
     .flatten() 
 
     .value(); 
 
     return results; 
 
    }; 
 
    });

body { 
 
    font-family:'Trebuchet MS', Verdana, sans-serif; 
 
    margin:20px 0px; 
 
    padding:0px; 
 
    text-align:center; 
 
} 
 
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { 
 
    cursor:pointer; 
 
} 
 
label { 
 
    cursor:default; 
 
    margin:0; 
 
} 
 
.form { 
 
    width:400px; 
 
    margin:0px auto; 
 
    text-align:left; 
 
    background:#F2F1F0; 
 
    border-top-left-radius: 10px 5px; 
 
    border-top-right-radius: 10px 5px; 
 
    border:1px solid #474641; 
 
} 
 
.formHeader { 
 
    background:#474641; 
 
    color:#ddd; 
 
    padding:4px; 
 
    font-weight:600; 
 
    border-top-left-radius: 10px 5px; 
 
    border-top-right-radius: 10px 5px; 
 
} 
 
.formBody { 
 
    padding:10px; 
 
} 
 
.data { 
 
    margin:0px auto; 
 
    text-align:left; 
 
} 
 
.dropdown-menu { 
 
    text-align:left; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
th{ 
 
    background-color: #29ABE2; 
 
    color: white; 
 
} 
 
tr> td { 
 
    text-align: left; 
 
} 
 
th, td { 
 
    padding: 15px; 
 

 
} 
 
tbody>tr:hover { 
 
    background-color: #0088cc; 
 
    color: white; 
 
} 
 

 
.headerSortUp { 
 
    background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%; 
 
} 
 
.headerSortDown { 
 
    background: url(data:image/gif; 
 
    base64, R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) no-repeat 99%; 
 
} 
 
    
 
.suggestion-name { min-width: 100px; } 
 
.suggestion-designation { min-width: 100px; } 
 
.suggestion-company { min-width: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
 

 
    
 

 
<div ng-app="app"> 
 
    <div class='container-fluid' ng-controller="TypeaheadCtrl"> 
 
     <!-- <pre>Model: {{result | json}}</pre> 
 
     <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)"> 
 
--> <pre>Model: {{monkey | json}}</pre> 
 

 
     <input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue"> 
 

 
    </div> 
 
    <!-- CACHE FILE: columnTwo.html --> 
 
    <script type="text/ng-template" id="columnTwo.html"> 
 
     <table class=""> 
 
      <thead ng-if="match.model.initial"> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Designation</th> 
 
       <th>Company</th> 
 
      </tr> 
 
      </thead> 
 
     <tr> 
 
     <td class="suggestion-name"> 
 
     <div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)"> 
 
      <a>{{ match.model.name }} </a> 
 
     </div> 
 
     </td> 
 
     <td class="suggestion-designation"> {{ match.model.designation }} </td> 
 
     <td class="suggestion-company"> {{ match.model.companydisplay }} </td> 
 
     </tr> 
 
     </table> 
 
    </script>