javascript - typeahead.js 远程不返回任何内容

Question

我似乎无法让 typeahead.js 的远程功能正常工作。我将发布代码来开始:

$(document).ready(function() {
    var locations = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: baseUrl + 'restaurants/fetchZIP/%QUERY'
    });

    $('#location').typeahead({
        hint: true,
        highlight: true,
        minLength: 1,
        source: locations.ttAdapter()
    });
    /*$('#location').keyup(function() {
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: baseUrl + 'restaurants/fetchZIP/',
            data: $('#add_restaurant').serialize(),
            success: function(data) {
                console.log(data);
            }
        });
    });*/
});

这是一个文件，我在其中执行 Bloodhound 远程操作，并在所需的输入字段上使用 typeahead。评论部分是一个测试，以确保我的数据库语句没有错误。我必须稍微重写以下代码来进行测试，但这基本上只是从 GET 到 POST 的切换:

public function fetchZIP($query)
{
    $cantons = DataLoc::find(array('zip LIKE' => '%'.$query));
    echo json_encode($cantons);
}

这是“restaurants/fetchZIP/”页面的操作(用 CodeIgniter 编写)。所以，我真的不知道发生了什么，因为我无法在 typeahead() 函数中使用 console.log() ，所以我希望任何人都可以引导我回到正确的方向。

Answer 1

首先，您必须在定义 Bloodhound 后立即使用 locations.initialize() 对其进行初始化。

这就是预输入的初始化方式

typeahead(options, [*datasets])

您在选项中包含了源(或数据集)，因此请尝试这样的操作

$('#location').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},{
    source: locations.ttAdapter()
});

希望这有帮助。