title: Combine Multiple Column Results UI.Bootstrap Typeahead Angularjs
body: <p>I have a search bar utilizing ui.bootstrap typeahead. I'm searching a users table for email, first_name, and last_name.</p>
  
  <p>I have everything connected, but it only works with the first OR last name name being typed in the input field, not both together.
  The first and last name are not being concatenated together. 
  And typing in the email, will only show the result of the name it's related to, not the completion of the email.</p>
  
  <p>I hope that last part makes sense.</p>
  
  <p>I assume I need to handle the data differently before it gets passed back to the HTML. But I'm not sure exactly how to do that.</p>
  
  <p>Here's what I have so far:</p>
  
  <p>navbar.HTML</p>
  
  <pre><code>&lt;input placeholder="Search..."
         ng-model="navbar.selected"
         uib-typeahead="results as results.first_name + ' ' + results.last_name for results in navbar.getSearchResults($viewValue)"
         type="text"
         typeahead-loading="loadingSearch"
         typeahead-min-length="3"
         typeahead-no-results="noResults"
         class="form-control" /&gt;
  </code></pre>
  
  <p>search.Controller</p>
  
  <pre><code>var vm = this;
  
  vm.getSearchResults = getSearchResults;
  
  function getSearchResults(search) {
    return searchService.getSearchResults(search);
  }}
  </code></pre>
  
  <p>search.Service</p>
  
  <pre><code>function getSearchResults(search) {
    return $http.get(API_URL + '/search/' + search)
      .then(handleSuccess)
      .catch(handleError);
  }
  
  // private functions
  function handleSuccess(response) {
    return response.data[0];
  }
  
  function handleError(error) {
    $log.error('XHR error: ');
    $log.error(error);
    return $q.reject(error);
  }}
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>    public function searchUsers($search)
      {   
          $this-&gt;db-&gt;where('email', "$search%", 'like', 'or')-&gt;
                     where('first_name', "$search%", 'like', 'or')-&gt;
                     where('last_name', "$search%", 'like', 'or'); 
          return $this-&gt;db-&gt;get('users');
  
  
      }
      public function getSearch($search)
      {
          $results = array();
          $search = $this-&gt;repository-&gt;searchUsers($search);
          foreach ($search as $value) {
              $newResult = array();
              $newResult['email'] = $value['email'];
              $newResult['first_name'] = $value['first_name'];
              $newResult['last_name'] = $value['last_name'];
              $results[] = $newResult;
          }
          return $results;
      }
  </code></pre>
  
  <p>Please let me know if I've left anything out.
  Any help would be greatly appreciated.</p>
  
  <p>EDIT:
  One thing I found when looking back at the typeahead documentation was the use of custom templates.</p>
  
  <p>By using a custom template I could add email the the list of displayed results.</p>
  
  <pre><code>    &lt;script type="text/ng-template" id="customTemplate.html"&gt;
        &lt;a&gt;
            &lt;span ng-bind-html="match.label | uibTypeaheadHighlight:query"&gt;&lt;/span&gt;&lt;br/&gt;
            &lt;span ng-bind-html="match.model.email | uibTypeaheadHighlight:query"&gt;&lt;/span&gt;&lt;br/&gt;
            &lt;br/&gt;
        &lt;/a&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>The "uibTypeaheadHighlight:query" may be redundant, but that's how I got it to work for me.</p>
  
  <p>I still can't get the first and last name to concatenate properly though.</p>