【问题标题】:Bootstrap 3 Typeahead doesn't show resultsBootstrap 3 Typeahead 不显示结果
【发布时间】:2016-10-28 09:20:56
【问题描述】:

我正在使用带有 ajax 调用的 Bootstrap 3 Typeahead。 该函数正确返回数据,但它们没有出现。

这是我的代码:

$('#txtComune').typeahead({
        minLength: 2,
        delay: 400,
        items: 5,
        source: function (query, response) {
            $.ajax({
                url: '<?= $root; ?>/get_comuni',
                dataType: "json",
                type: 'POST',
                data: {
                    query: query
                },
                success: function (data) {
                    response(data.comuni);
                }
            });
        },
        displayText: function (item) {
            console.log(item.comune);
            return item.comune;
        }
    });

console.log 函数返回所有城市的名称,但下拉列表不会出现在文本框中。

这是我的文本框代码:

<input name="txtComune" class="form-control input-md" data-provide="typeahead" autocomplete="off" id="txtComune" type="text" placeholder="" maxlength="250">

这是我的 JSON 结果:

{
"exception": false,
"comuni": [{
    "idComune": 1332,
    "comune": "Caraffa di Catanzaro",
    "pv": "CZ",
    "cap": "88050",
    "attivo": 1
}, {
    "idComune": 1831,
    "comune": "Catania",
    "pv": "CT",
    "cap": "951xx",
    "attivo": 1
}, {
    "idComune": 1832,
    "comune": "Catanzaro",
    "pv": "CZ",
    "cap": "88100",
    "attivo": 1
}, {
    "idComune": 3240,
    "comune": "Gravina di Catania",
    "pv": "CT",
    "cap": "95030",
    "attivo": 1
}, {
    "idComune": 4076,
    "comune": "Militello in Val di Catania",
    "pv": "CT",
    "cap": "95043",
    "attivo": 1
}, {
    "idComune": 6258,
    "comune": "San Gregorio di Catania",
    "pv": "CT",
    "cap": "95027",
    "attivo": 1
}]
}

【问题讨论】:

    标签: php jquery json ajax bootstrap-typeahead


    【解决方案1】:

    请更改:

    source: function (query, response) {
            $.ajax({
                url: '<?= $root; ?>/get_comuni',
                dataType: "json",
                type: 'POST',
                data: {
                    query: query
                },
                success: function (data) {
                    response(data.comuni);
                }
            });
    }
    

    source: function (query, response) {
        return $.get('<?= $root; ?>/get_comuni', { query: query }, function (data) {
            console.log(data);
            return response(data);
        });
    }
    

    这里是一个例子:jsfiddle

    【讨论】:

    • 你能发布你的 json 吗?
    • @Swim89,我更新了我的答案。我放了一个 jsfiddle 示例。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多