title: How to have 2 different results in a bootstrap dropdown separated by a heading?
body: <p>I am trying to show different results in a single autocomplete result differentiating with the heading. I have 2 roles Subject and Teacher, when searching with some letter I want to show both the results of Teacher and Subject, but want to differentiate as below</p>
  <p>Expected Output</p>
  <p><a href="https://i.stack.imgur.com/zaIAK.png" rel="nofollow noreferrer">expected output</a></p>
  <p>Teacher heading will differentiate the 2 result sets</p>
  <p>The output I am getting</p>
  <pre><code>Subject
  Math
  ...
  
  Maddy
  ....
  </code></pre>
  <p>The link to the code is <a href="https://stackblitz.com/edit/angular-6l51vd?file=app%2Fapp.component.html" rel="nofollow noreferrer">here</a></p>
  <p>Any help is much appreciated.</p>
  <p>Thanks in advance!!</p>