Bootstrap typeahead - Подразделы (заголовки)

Question

Я работаю с плагином «typeahead» из Bootstrap.

я загрузить данные с помощью AJAX, как это:

$.ajax({ 

      type: "POST", 
      url: "/library/autocomplete", 
      dataType: 'json', 
      success: function(data) { 
       $('#autocomplete').typeahead({source: data}) 
      }, 
      error: function(data){ 
       console.log("Data is: " + data); 
      }, 
      onComplete: function(){ 

      } 
     }); 

В autocompleteAction:

public function autocompleteAction() 
{ 
    // disable view and layout 
    $this->_helper->layout()->disableLayout(); 
    $this->_helper->viewRenderer->setNoRender(true); 

    $values = array(); 

    $usernames = UserQuery::create()->find(); 
    $usernames = $usernames->toArray(); 

    $organizations = OrganizationQuery::create()->find(); 
    $organizations = $organizations->toArray(); 

    foreach($organizations as $organization){ 
     array_push($values, $organization["Name"]); 
    } 
    foreach($usernames as $username){ 
     array_push($values, $username["Username"]); 
    } 

    echo $this->_helper->json($values); 
    exit; 
} 

Как вы можете видеть, что я загрузить имена пользователей и организаций из базы данных, так что вы можете добавить их обоих.

Теперь, когда я печатаю текстовое поле, я вижу подсказки от организаций и имен пользователей. Есть ли способ добавить заголовок и показать организации в разделе «Название организации» и имена пользователей в разделе «Имя пользователя».

Изображение для clarifcation:

Answer 1

Найдено решение. Пример можно найти здесь: http://twitter.github.io/typeahead.js/examples/

Проверьте пример «Команды НБА и НХЛ» на странице!