typeahead中的多个值

时间:2016-07-14 07:56:11

标签: php jquery typeahead

我试图从多个表中获取数据,然后在输入字段下显示它。它目前只是相互重叠。我有一个用户的PHP文件和一个公司的文件。

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>  

目前的情况:

Current field view

1 个答案:

答案 0 :(得分:0)

我不确定,但也许是因为你初始化了typeahead两次?尝试做这样的事情:

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