javascript - AngularUI- Bootstrap 提前输入 : Grouping results

Question

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

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

根据现有的 Typeahead 文档 here ，我没有看到任何选项可以满足我的要求。

我尝试过以下解决方法:每当形成预输入数组时，我都会将用户部门附加到数组元素:

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

用户在字符串中键入

用户选择一条记录

当用户选择记录时，我想避开部门(在本例中为字符串 - DES 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;
}

希望这也符合您的要求。