[英]Ajax call populate Typeahead Bootstrap
我想要做的是通過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對象的值Name?
如果在Ajax Success中我放了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"
]
如果您的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);
});
查看這個要點。 是否自動完成,處理快速打字機和緩存
這對我有用: -
HTML設置:
<!-- HTML Setup-->
<input type="text" id="my-typeahead" />
Javascript:
/*
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 Docs - Datasets
: https : //github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets
Jquery **$.ajax()**
: https : //api.jquery.com/jquery.ajax/
祝好運。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.