Question

我有Bootstrap Typeahead的这个问题。

HTML标记：

<div class="form-group">
    <label for="">Recipients</label>
    <input id="recipients" name="recipients" 
        autocomplete="off" 
        class="form-control" 
        data-role="tagsinput">
</div>

JavaScript的：

$('#recipients').tagsinput({
    allowDuplicates: false,
    trimValue: true,
    confirmKeys: [13, 44],
    typeahead: {
        source: function(queryForHints) {
            if (queryForHints.length < 4)
                return '';
            var parameters = {
                'queryForHints': queryForHints
            };
            jQuery.ajax({
                url: "/xxxx/xxxx",
                data: parameters,
                type: "POST",
                dataType: "json",
                success: function(data) {
                    return (data);
                },
                error: function(data) {
                    console.log("error for xxxxx/xxxxx");
                },
                async: true
            });
        }
    }
});

在Ajax调用之后，我得到了这个数组：

[{
    "value": "+393334029137",
    "text": "Dean Leandra (+393334029137)"
}, {
    "value": "+393333419836",
    "text": "Alfonso Erasmus (+393333419836)"
}, {
    "value": "+393173833341",
    "text": "Travis Aquila (+393173833341)"
}, {
    "value": "+393334998841",
    "text": "Conan Preston (+393334998841)"
}]

问题是：我什么也看不见:(没有出现.typeahead不起作用。

在控制台中，我收到此错误

bootstrap-tagsinput.js：331 Uncaught TypeError：无法读取属性未成功的“成功”

你能帮我解决这个问题吗？

Answer 1

    -f FILE, --file=FILE
Obtain patterns from FILE, one per line.  The empty file contains zero patterns, 
and therefore enter code here`matches nothing.  (-f is  specified by POSIX.)

您从JSON响应中获得的是一个对象数组。您希望看到success: function(data) { var sourceData = []; for (var i = 0; i < data.length; i++) { sourceData.push(data[i].text); } return (sourceData);作为我假设的建议。因此，您需要从对象获取text，因为typeahead source需要一个字符串数组。将text值推送到另一个字符串数组并返回它。我还没有对代码进行测试，但它应该适合你。

您遇到的另一个问题是您正在进行异步的AJAX调用。这就是为什么你不能成功的原因。

BS Typeahead不显示结果

1 个答案: