自动完成建议不适用于 ajax答案

【问题标题】：Autocomplete suggestion not working for ajax自动完成建议不适用于 ajax
【发布时间】：2017-03-07 09:28:06
【问题描述】：

我已经使用 bootstrap typeahead 来实现自动完成功能。

以下代码运行良好：

$(function () {
var $input = $(".typeahead");
$input.typeahead({
    source: [
       {id: "someId1", name: "Display name 1"},
       {id: "someId2", name: "Display name 2"}
    ],
    minLength: 2
});
});

但我想使用 ajax 搜索。所以我做了如下更改：

$(function () {
var $input = $(".typeahead");
$input.typeahead({
    source: function(query, process) {
        return $.get('/search/good/auto-complete?term='+$('#search_searchtext').val());
    },
    minLength: 2
});
});

以上代码执行 ajax 请求，但没有显示来自 ajax 响应的建议。

所以请建议我该怎么做。

【问题讨论】：

您能否检查浏览器开发工具的 NET 选项卡并查看响应的样子。也许不是 JSON。
是的，它是 JSON 格式。
您返回的响应内容类型是什么？
Content-Type 是application/json 的响应。

标签： jquery ajax twitter-bootstrap typeahead.js bootstrap-typeahead

【解决方案1】：

试试

$(function () {
    var $input = $(".typeahead");
    $input.typeahead({
        source: function(query, process) {
            return $.getJSON(
                '/search/good/auto-complete?term='+$('#search_searchtext').val(),
                //{ query: query }, // <- Maybe you can use it instead of ?term='+$('#search_searchtext').val()
                function (data) {
                    var newData = [];

                    $.each(data, function(){
                        newData.push(this.name);
                    });

                    process(newData);

                    return;
                });
        },
        minLength: 2
    });
});

【讨论】：

【解决方案2】：

对于 typeahead 插件，我认为您需要配置 Bloodhound 引擎。请参考文档 -

https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

应该是这样的——

 var data= new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/api/data?query=%QUERY',
        wildcard: '%QUERY'
    }
});

然后您可以将源作为上述数据对象，如下所示 -

$('#input').typeahead({
    hint: true,
    highlight: true,
    valueKey: 'name',
    minLength: 1
}, {
    name: 'title',
    display: 'name',

    source: data
});

你可以试试看。

【讨论】：