javascript - How to do autocomplete dropdown as a grid in angularJS? -
here created sample autocomplete, working fine , need modification on this.currently works this
but need need show dropdown grid view. 
can 1 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; // 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 suggestion in cities($viewvalue)"> --> <pre>model: {{monkey | json}}</pre> <input type="text" ng-model="monkey" typeahead-template-url="columntwo.html" typeahead="suggestion.name 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>
as commented, since template repeated every suggestion.name in sample data set, it's going include column headers above each of listed names.
update: jury-rigged solution, found in this previous answer, inject angular's filterfilter and, rather using $scope.sample_data collection repeat through, instead create pre-filtered group based on $viewvalue. in order group persons in data set together, added company property each (making assumption here). can set indicator property (in case initial = true) on first element in filtered data set.
and finally, in template, in addition changing typeahead attribute value suggestion.name suggestion in filtered_sample_data($viewvalue) | filter: $viewvalue">, you'll set ng-if on table head show if `match.model.initial' true.
this work long every person in data set has generic property same value other persons in set, , group property.
[note filter uses lodash's implicit chaining, added script tag lodash.js well.]
credit @runtarm 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; // 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 suggestion in cities($viewvalue)"> --> <pre>model: {{monkey | json}}</pre> <input type="text" ng-model="monkey" typeahead-template-url="columntwo.html" typeahead="suggestion.name 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>
Comments
Post a Comment