Несколько значений в typeahead

Question

Я пытаюсь получить данные из нескольких таблиц, а затем показать, что он под полем ввода. В настоящее время он просто перекрывает друг друга. У меня есть файл PHP для пользователей и один для компаний.

The JQuery:

 var companies = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: '_companies?query=%QUERY', 
      wildcard: '%QUERY' 
     } 
    }); 

    var users = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('username'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: '_users?query=%QUERY', 
      wildcard: '%QUERY' 
     } 
    }); 

    companies.initialize(); 
    users.initialize(); 

    $('#username').typeahead({ 

     hint: true, 
     highlight: true, 
     minLength: 2 
    }, { 
     name: 'companies', 
     displayKey: 'name', 
     source: companies.ttAdapter() 
    }); 

    $('#username').typeahead({ 

     hint: true, 
     highlight: true, 
     minLength: 2 
    }, { 
     name: 'users', 
     displayKey: 'username', 
     source: users.ttAdapter() 
    }); 

_users.php:

<?php 

require_once '../core/init.php'; 

header('Content-Type: application/json'); 

if(!isset($_GET['query'])) { 
    echo json_encode([]); 
    exit(); 
} 

$u = new User(); 

$uData = $u->autoComplete(escape($_GET['query'])); 
$uData = $u->data(); 

echo json_encode($uData); 

_companies.php является подобный файл. Использует почти тот же код.

HTML, поле ввода:

<div class="form-group"> 
    <label>Aan:</label><br /> 
    <input class="form-control" placeholder="Gebruikersnaam" id="username" name="gebruikersnaam" value="<?php echo Input::get('gebruikersnaam'); ?>" autocomplete="off"> 
</div> 

Что она в настоящее время выглядит следующим образом:

Answer 1

Я не уверен, но, возможно, это потому, что вы инициализировать машинописный дважды? Попробуйте сделать что-то вроде этого:

$('#username').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 2 
}, { 
    name: 'companies', 
    displayKey: 'name', 
    source: companies.ttAdapter() 
}, { 
    name: 'users', 
    displayKey: 'username', 
    source: users.ttAdapter() 
});