javascript - AngularUI-Bootstrap Typeahead : Grouping results

Question

我正在使用 AngularUI-Bootstrap 实现提前输入。我需要显示根据来自数据库的某些值分组的结果。这是一个示例场景

1. 数据库中有一些用户，每个用户都有一个“部门”。一个用户名可以在多个部门使用。
2. 最终用户键入姓名以从数据库中搜索用户，并在预输入列表中检索列表。由于一个用户名可以属于多个部门，所以需求是显示不同部门分组的用户名。像这样:
3. 然后用户可以选择所需的用户名并继续。

根据 Typeahead 文档提供 here ，我看不到任何选项可以满足我的要求。

我已经尝试了这个解决方法:每当 typeahead 数组形成时，我将用户部门附加到数组元素:

$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;
        });
    };

这样，至少最终用户可以看到该部门。但是当我选择记录时，选择的值是数组元素的全部内容。以下是详细说明的示例屏幕截图:

HTML

来自本地服务的用户

<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>

字符串中的用户类型

用户选择一条记录

我想在用户选择记录时避开部门(在本例中为字符串 - Desc 4 )。

有没有什么方法可以在没有任何解决方法的情况下实现这种分组？或者有什么方法可以改进我的解决方法？

Answer 1

我曾经有过类似的需求，这是我当时的做法。

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

诀窍是将 typeahead-template-url 设置为自定义项目模板:

<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" />

项目模板，代表下拉列表中的每个项目:

<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>

如您所见，如果该项目的属性 firstInGroup 设置为 true，则有一个 ng-if 来显示组标题。

使用 lodashjs 填充 firstInGroup 属性:

$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;
}

希望这也符合您的要求。