Jquery Ajax调用预先填充类型引导

我要做的是通过Ajax获取json对象，并用一种值填充引导程序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对象。
我从头开始创建它：

$('#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"
 ]

如果您的
数据
数组具有不同的结构，只需在将其传递给
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);

}); 

看看这个要点。是否自动完成、处理快速打字机和缓存

这就是我的工作原理：-

HTML设置：

<!-- HTML Setup-->
<input type="text" id="my-typeahead" />

/* 
example remote-data-source
[
  {
    id:1,
    name:'Batman'
  },{
    id:2,
    name:'Superman'
  } 
]
*/

$('#my-typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    name: 'myDataset',
    source: function(str, sync, async) {
        // abstracting out the "REST call and processing" in a seperate function
        restCall(str, async);
    },
    templates: {
        suggestion: function(user) {
            return '<div>' + user.name + '</div>';
        },
        pending: '<div>Please wait...</div>'
    }
});

// The function that will make the REST call and return the data
function restCall(str, async) {
    return $.ajax('http://url-for-remote-data-source/query?name=' + str, {
        // headers and other setting you wish to set-up
        headers: {
            'Content-Type': 'application/json',
        },
        // response
        success: function(res) {
            //processing data on response with 'async'
            return async(res.data);
        }
    });
}



Javascript:

<!-- HTML Setup-->
<input type="text" id="my-typeahead" />

/* 
example remote-data-source
[
  {
    id:1,
    name:'Batman'
  },{
    id:2,
    name:'Superman'
  } 
]
*/

$('#my-typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    name: 'myDataset',
    source: function(str, sync, async) {
        // abstracting out the "REST call and processing" in a seperate function
        restCall(str, async);
    },
    templates: {
        suggestion: function(user) {
            return '<div>' + user.name + '</div>';
        },
        pending: '<div>Please wait...</div>'
    }
});

// The function that will make the REST call and return the data
function restCall(str, async) {
    return $.ajax('http://url-for-remote-data-source/query?name=' + str, {
        // headers and other setting you wish to set-up
        headers: {
            'Content-Type': 'application/json',
        },
        // response
        success: function(res) {
            //processing data on response with 'async'
            return async(res.data);
        }
    });
}

/*
远程数据源示例
[
{
id:1，
姓名：'蝙蝠侠'
},{
id:2，
姓名：'超人'
} 
]
*/
$（“#my typeahead”）。typeahead({
提示：没错，
推荐理由：没错，
最小长度：1
}, {
名称：“myDataset”，
来源：函数（str、sync、async）{
//在一个单独的函数中抽象出“REST调用和处理”
restCall（str，async）；
},
模板：{
建议：功能（用户）{
返回“”+user.name+“”；
},
待定：“请稍候…”
}
});
//将进行REST调用并返回数据的函数
函数restCall（str，异步）{
返回$.ajax（$）http://url-for-remote-data-source/query?name=“+str{
//标题和其他要设置的设置
标题：{
“内容类型”：“应用程序/json”，
},
//回应
成功：功能（res）{
//使用“异步”处理响应上的数据
返回异步（res.data）；
}
});
}

参考文献：

<!-- HTML Setup-->
<input type="text" id="my-typeahead" />

/* 
example remote-data-source
[
  {
    id:1,
    name:'Batman'
  },{
    id:2,
    name:'Superman'
  } 
]
*/

$('#my-typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    name: 'myDataset',
    source: function(str, sync, async) {
        // abstracting out the "REST call and processing" in a seperate function
        restCall(str, async);
    },
    templates: {
        suggestion: function(user) {
            return '<div>' + user.name + '</div>';
        },
        pending: '<div>Please wait...</div>'
    }
});

// The function that will make the REST call and return the data
function restCall(str, async) {
    return $.ajax('http://url-for-remote-data-source/query?name=' + str, {
        // headers and other setting you wish to set-up
        headers: {
            'Content-Type': 'application/json',
        },
        // response
        success: function(res) {
            //processing data on response with 'async'
            return async(res.data);
        }
    });
}

Typeahead文档-数据集
：

Jquery**$.ajax（）**
：

祝你好运。
成功
回调不必返回任何内容，因为它是一个异步调用-检查。如果我删除
返回arr它不工作…从你的链接我无法理解咖啡脚本。我应该在哪里声明
属性：“name”
只有一个问题，为什么我应该在url
+查询中添加
？！？我的控制台日志显示：TypeError:typeahead.process不是一个函数。您正在根据键入的内容向服务器询问内容-
query
string。我使用
data:{……：}
传递值，答案很好。但是您应该编写
过程（数据）；返回而不是
返回过程（数据）这应该是可接受的答案。更加复杂和高效。谢谢你的要点！我想出了自己的解决办法，但不是很好，我对此很不满意。这个很好，很简单注意：对于其他人，您需要添加或执行任何操作，只需在代码中复制，更改
getJSON
的URL即可。开箱即用。谢谢，很高兴你喜欢。这其中也有一些很好的要点。这是可行的，但要确保在特定ajax调用的成功响应中res变量的格式。