How to do autocomplete dropdown as a grid in angularJS?

Question

Here I created sample for autocomplete, which is working fine and I need to do some modification on this.currently it works like this

but what I exactly need is I need to show the dropdown as grid view. some like this

can any one help on this?.. thanks

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>

You're missing a closing double-quote in your columnTwo.html ng-template. Should be ``. That gets the grid showing up. — Bennett Adams, Jan 22 '16 at 05:29
Yeah, since the entire typeahead template is basically ng-repeated over every suggestion.name in your data, I don't think you can include the table head in the template without it repeating for every name. You can, of course, drop the `{{ match.model.designation }}` into its own `` data element and achieve a similar effect, but without the column headers. — Bennett Adams, Jan 22 '16 at 05:42

score 9 · Answer 1 · edited May 23 '17 at 12:31

As I commented, since the template is repeated for every suggestion.name in your sample data set, it's going to include column headers above each of the listed names.

UPDATE: A jury-rigged solution, as found in this previous SO answer, is to inject angular's filterFilter and, rather than using $scope.sample_data as your collection to repeat through, instead create a pre-filtered group based on the $viewValue. In order to group all the persons in your data set together, I added a company property to each (making an assumption here). You can then set an indicator property (in this case initial = true) on the first element in the filtered data set.

And finally, in your template, in addition to changing your typeahead attribute value to suggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue">, you'll set an ng-if on the table head to show only if `match.model.initial' is true.

This will work as long as every person in the data set has some generic property with the same value as all other persons in the set, and you group by that property.

[Note that the filter uses lodash's implicit chaining, so I added a script tag for lodash.js as well.]

Credit @runTarm for the workaround.

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

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

 
    $scope.sample_data = [{
         "name": "Nelson",
         "designation":"GM",
         "company": "acme"
       },
       {
        "name": "suresh",
        "designation":"Developer",
        "company": "acme"
       },
       {
        "name": "Naresh",
        "designation":"Developer",
        "company": "acme"
       }];

    $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, td, th {    
    border: 1px solid #ddd;
    text-align: left;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 15px;
}
.suggestion-name { min-width: 100px; }
.suggestion-designation { 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>
            </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>
      </tr>
      </table>
    </script>

this one is fine, but what i exactly need is i already mention in 2nd image — Suresh B, Jan 22 '16 at 06:02
No problem. Sorting is a bit outside the scope of your original question. It would benefit other users for you to create a new question regarding sorting in the headers. If I have answered the original one sufficiently, please feel free to accept it. — Bennett Adams, Jan 22 '16 at 14:42
yeah surely i will accept your answer.. but is it possible?can u answer for new one?? — Suresh B, Jan 25 '16 at 04:47

score 1 · Answer 2 · answered Feb 18 '16 at 13:24

agGrid.initialiseAgGridWithAngular1(angular);
 function showGrid(val)
  {
   console.log(val.length)
   if(val.length <3){
     document.getElementById('myGrid').style.display='none'
   }
   else
   {
      console.log("hide count")
    document.getElementById('myGrid').style.display='block'
   }
  }
var fileBrowserModule = angular.module('basic', ['agGrid']);

fileBrowserModule.controller('basicController', function($scope) {
 
 $scope.gridheader = [
     {headerName: "Make", field: "make"},
     {headerName: "Model", field: "model"},
     {headerName: "XModel", field: "model"},
     {headerName: "Rate", field: "price"},
     {headerName: "Price", field: "price"}
    ];
   $scope.rowData = [
     {make: "Toyota", model: "Celica", price: 35000},
     {make: "Ford", model: "Mondeo", price: 32000},
     {make: "Porsche", model: "Boxter", price: 72000},
     {make: "Audi", model: "Boxter", price: 92000},
     {make: "Toyota", model: "Celica", price: 35000},
     {make: "Ford", model: "Mondeo", price: 32000},
     {make: "Porsche", model: "Boxter", price: 72000},
     {make: "Audi", model: "Boxter", price: 92000}
    ]; 
 
 
 

    $scope.gridOptions = {
        columnDefs: $scope.gridheader,
        rowData: $scope.rowData,
  onSelectionChanged: onSelectionChanged,
        rowSelection: 'single',
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        groupHeaders: true,
        rowHeight: 22,
        onModelUpdated: onModelUpdated,
        suppressRowClickSelection: false
  

    };

    function onModelUpdated() {
         var model = $scope.gridOptions.api.getModel();
         var totalRows = $scope.gridOptions.rowData.length;
         var processedRows = model.getVirtualRowCount();
       $scope.rowCount = processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString();
    }
 
 function onSelectionChanged() {
  var selectedRows = $scope.gridOptions.api.getSelectedRows();
     var selectedRowsString = '';
    selectedRows.forEach( function(selectedRow, index) {
        if (index!=0) {
            selectedRowsString += ', ';
        }
        selectedRowsString += selectedRow.make;
    });
 $scope.gridOptions.quickFilterText = selectedRowsString;
    document.querySelector('#selectedRows').innerHTML = selectedRowsString;
 document.getElementById('myGrid').style.display='none'
}

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    
});

 

});

<script src="https://www.ag-grid.com/dist/ag-grid.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
 
</head>

<body ng-app="basic">

    <div ng-controller="basicController" style="width: 800px;">
        <div style="padding: 4px">
            <div style="float: left;">
                <p>type audi or toyota</p><input type="text" ng-model="gridOptions.quickFilterText"   onKeyPress="return showGrid(this.value)"   placeholder="Type text to filter..."/>
            </div>
            <div style="padding: 4px;">
                    <span id="selectedRows">
    </span>
 ({{rowCount}})
            </div>
            <div style="clear: both;"/>
        </div>
        <!--<grid-Wrapper get-header="gridheader" get-data="rowData" enable-Filter="{{true}}" enable-Sorting="{{true}}" enable-Col-Resize="{{true}}"></grid-Wrapper>-->
        
         <div id="myGrid" style="width: 100%; height: 400px; display:none"
             ag-grid="gridOptions"
             class="ag-fresh ag-basic"  >
        </div> 
    </div>

</body>
</html>

How to do autocomplete dropdown as a grid in angularJS?

2 Answers2