AngularUI-Bootstrap Typeahead: Grouping results

AngularUI-Bootstrap Typeahead: Grouping results

I am implementing typeahead using AngularUI-Bootstrap. I need to show the results grouped based on some values coming from the database. Here’s a sample scenario

There are some users in the database, each user has a “Department”. One user name can be available in multiple departments.
The end-user types in the names to search users from the database and retrieves the list in the typeahead list. Since one user name can belong to multiple departments, the requirement is to show the user names grouped by different departments. Something like this:

Then the user can select the desired user name and proceed.

As per the Typeahead documentation present here, I don’t see any option to cater to my requirement.
I have tried the this workaround: Whenever the typeahead array is getting formed, I appended the user department to the array element:
$scope.fetchUsers = function(val) {
console.log(“Entered fetchUsers function”);
return $http.get(“http://localhost:8080/TestWeb/users”, {
params : {
username : val
}).then(function(res) {
var users = [];
angular.forEach(, function(item) {
users.push(item.UserName + ” – ” + item.UserDepartment);
return users;

Related:  Responsive website zoomed out to full width on mobile

This way, at least the end user sees the department. But when I select the record, the selected value is the full content of the array element. Below is sample screenshot to elaborate:

Users from local service

Model: {{userList | json}}

User types in the string

User selects one record

I want to avoid the department (in this case, string – Desc 4 ) when user selects a record.
Is there any way I can achieve this grouping without any workaround? Or is there any way I can enhance my workaround?


Solution 1:

I used to have a similar requirement and here is how I did it that time.

Example Plunker:

The trick is to set the typeahead-template-url to a custom item template:

<input type="text" class="form-control" placeholder="Users loaded from local database"
    typeahead="user as for user in getUsers($viewValue)"
    typeahead-template-url="typeahead-item.html" />

The item template, this represent each item in a dropdown:

<div class="typeahead-group-header" ng-if="match.model.firstInGroup">Desc {{}}</div>
  <span ng-bind-html="match.label | typeaheadHighlight:query"></span>

As you can see, there is an ng-if to show a group header if that item has a property firstInGroup set to true.

Related:  Changing the active class of a link with the twitter bootstrap css in python/flask

The firstInGroup properties are populated like this using lodashjs:

$scope.getUsers = function (search) {
  var filtered = filterFilter(users, search);

  var results = _(filtered)
    .map(function (g) {
      g[0].firstInGroup = true; // the first item in each group
      return g;

  return results;

Hope this fit to your requirement too.

Solution 2:

please see here

instead of creating new objects here:

 angular.forEach(, function(item) {
                users.push(item.UserName + " - " + item.UserDepartment);

use create template :

 <script type="text/ng-template" id="customTemplate.html">
    <a> {{}} - department : {{match.model.dept}}</a>

and use it in your Typeahead directive

<input type="text" ng-model="selected"
 typeahead=" as user for user in users | filter:$viewValue | limitTo:8" class="form-control"