如何在 typeahead Angular 输入搜索框中分离两组数据？

Question

我正在尝试使用 Angular Bootstrap 构建搜索框自动完成功能。当我开始在输入字段中输入时，我希望自动提示输出 (html) 是这样的：

类别

艺术

科学

数学

课程

代数

生物学

绘画

结果分为几个部分 - 基于两个数组的类别和课程。这就是我对 angular 控制器

的看法

     $scope.courseSearchList = $http.get('api/courses', {cache: false});


    $scope.categorySearchList = $http.get('api/categories', {'cache': false});


  $q.all([$scope.categorySearchList, $scope.courseSearchList]).then(function(values) {

      var a = values[0].data;
      var b = values[1].data;
      var c = [];

      c.push(a);
      c.push(b);

      console.log(c[0], 'categories');
      console.log(c[1], 'courses');

      $scope.searchResults = c;
  });

所以 scope.searchResults 将在 [[obj],[obj]] 中有两个数组。第一个数组包含所有类别的标题，第二个数组包含所有课程的标题。范围由输入字段调用，这里是下面

<div class="custom-typehead">
    <input type="text" ng-model="selected" placeholder="search a course"
    uib-typeahead="items.title for items in searchResults | filter:$viewValue:startsWith" typeahead-template-url="searchResults.html"
    typeahead-on-select="onSelect($item, $model, $label)" typeahead-min-length="1" class="form-control" ng-init="">
  </div>

  <script type="text/ng-template" id="searchResults.html">
    <div>
        <div>
          courses

          {{match.model[0].title}}

        </div>

        <div">
          categories
          {{match.model[1].title }}
        </div>
    </div>
  </script>

我知道脚本和输入是错误的，但我仍在尝试找到一种方法将结果分成两部分，如上面所需的输出；或者也许您可以为这个问题提供更好的解决方案。谁能帮我解决这个问题？ Angular 的新手，仍在学习这个很酷的框架。

非常感谢您的帮助。提前致谢！

Answer 1

看起来您正在使用 angular-bootstrap 框架。如果是，那么 this link 可能会对您有所帮助。

Answer 2

您可以使用 md - 自动完成 material 角度这是 link https://material.angularjs.org/latest/demo/autocomplete

希望能帮到你

如何在 typeahead Angular 输入搜索框中分离两组数据？

how to separate two set of data in typehead Angular input search box?

html

javascript

angularjs

angular-bootstrap