Ajax调用填充Typeahead Bootstrap

小编典典

Ajax调用填充Typeahead Bootstrap

ajax

我正在尝试通过Ajax获取json对象，并仅用一种值填充Bootstrap Typeahead。

这是我的代码：

nameTypeHead: function () {
        var _self = this,
            searchInput = $('#nameTypeHead'),
            arr = [];

        function getArray() {
            $.ajax({
                url: '/Home/AutoComplete',
                type: 'post',
                dataType: 'json',
                data: { searchText: searchInput.val() },
                success: function (data) {
                    $.each(data, function () {
                        arr.push(this.Name);
                    });
                    return arr;
                }
            });
        }

        searchInput.typeahead({
            source: getArray()
        });
    }

我收到 arr为null* 的错误 *

我也尝试过.parseJSON()但没有成功：

$.each($.parseJSON(data), function () {
   arr.push(this.Name);
});

我该怎么做才能在Typeahed中仅显示我的Json对象的名称值？

如果在“ Ajax成功”中，我将alert(JSON.stringify(data));其正确地提醒我的Json对象。

阅读 239

2020-07-26

共1个答案

小编典典

我从头开始：

$('#typeahead').typeahead({

    source: function (query, process) {
        return $.getJSON(
            'path/to/lookup',
            { query: query },
            function (data) {
                return process(data);
            });
    }

});

data一个简单的JSON数组在哪里？

 [
   "John",
   "Jane",
   "Alfredo",
   "Giovanni",
   "Superman"
 ]

如果您的data数组具有不同的结构，则在将其传递给process()方法之前重新排列它即可。

您可以在此处找到一个实时示例。

编辑-根据您的json数据：

[
    {'id':'0', 'name':'John'},
    {'id':'1', 'name':'Jane'}, 
    {'id':'2', 'name':'Alfredo'},
    ...
}

该getJSON回调变为：

function (data) {

    var newData = [];

    $.each(data, function(){

        newData.push(this.name);

    });

    return process(newData);

});

2020-07-26