AngularUI-Bootstrap Typeahead: Grouping results

Question

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

1. There are some users in the database, each user has a "Department". One user name can be available in multiple departments.
2. 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:
3. 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) {
            console.log("Response:",res);
            var users = [];
            angular.forEach(res.data, function(item) {
                users.push(item.UserName + " - " + item.UserDepartment);
            });
            console.log("users=",users);
            return users;
        });
    };

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:

HTML

Users from local service

<pre>Model: {{userList | json}}</pre>
<input type="text" ng-model="userList" placeholder="Users loaded from local database" 
typeahead="username for username in fetchUsers($viewValue)" 
typeahead-loading="loadingUsers" class="form-control">
<i ng-show="loadingUsers" class="glyphicon glyphicon-refresh"></i>

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?

Answer 1

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

Example Plunker: http://plnkr.co/edit/zujdouvB4bz7tFX8HaNu?p=preview

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"
    ng-model="selectedUser"
    typeahead="user as user.name 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 {{match.model.group}}</div>
<a>
  <span ng-bind-html="match.label | typeaheadHighlight:query"></span>
</a>

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

The firstInGroup properties are populated like this using lodashjs:

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

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

  return results;
}

Hope this fit to your requirement too.

Answer 2

please see here http://plnkr.co/edit/DmoEWzAUHGEXuHILLPBp?p=preview

instead of creating new objects here:

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

use create template :

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

and use it in your Typeahead directive

<input type="text" ng-model="selected"
 typeahead="user.name as user for user in users | filter:$viewValue | limitTo:8" class="form-control"
typeahead-template-url="customTemplate.html">