Mehrere Werte in typeahead

Question

Ich versuche, Daten aus mehreren Tabellen zu erhalten und dann zeigen, ist es eine unter dem Eingabefeld. Es überschneidet sich momentan einfach. Ich habe eine PHP-Datei für Benutzer und eine für Unternehmen.

Die 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 ist eine ähnliche Datei. Benutzt den fast gleichen Code.

Die HTML-Eingabefeld:

<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> 

Was es sieht derzeit wie:

Answer 1

Ich bin nicht sicher, aber es ist vielleicht, weil Sie typeahead zweimal initialisieren? Versuchen Sie, etwas wie folgt zu tun:

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