我正在搜索twitter's typeahead的示例。
我想用函数获取数据,我应该使用远程吗?
从服务器数据返回的将是Json(不仅仅是一个数组)。
从那些我想只显示字段,例如name
。
选择了正确的name
后,我想运行另一个功能,例如提醒该对象的id
和description
(字段)。可能与typeahead:autocompleted
事件绑定器?
更新/样本:
Dajaxice.async.get_closest_events()
贝娄将3个参数发送到内部服务器(lat,lng,query)。查询是用户编写的值。它返回一个数组(venuesNames
),它将显示在下拉列表中。
$( "#locationQueryInput" ).typeahead({
remote:{
replace: function (query ) {
//alert($("locationQueryInput").val());
Dajaxice.async.get_closest_events(
(function(data){
venuesNames = []
venuesDetails = []
for (var i = 0; i < data.fVenues.length; i++) {
venuesNames.push(data.fVenues[i].name)
venuesDetails[ data.fVenues[i].name ] = {
'id' : data.fVenues[i].id,
'lat' : data.fVenues[i].lat,
'lng' : data.fVenues[i].lng,
'address' :data.fVenues[i].address,
'city' :data.fVenues[i].city,
}
}
return venuesNames
}),
{'lat' : new_marker_latlng.lat, 'lng' : new_marker_latlng.lng, 'query' : query }
);
}
}
}).bind('typeahead:selected', function(obj,datum){
// do stuff upon completion
...
}
答案 0 :(得分:1)
以下是使用json响应的一个很好的示例:How to render JSON response using latest typeahead.js library。
然后绑定事件,你将上述建议与以下内容结合起来:
$('.selector').typeahead({
// base this part on example link given above...
}).bind('typeahead:autocompleted', function (obj, datum) {
console.log(datum); // datum will contain the value that was autocompleted
});
更新1: 关于查询参数,您的函数调用写得不正确。根据文件:
replace - 具有签名替换的函数(url,uriEncodedQuery) 可用于覆盖请求URL。预计会退货 有效的网址。如果设置,则不会对URL执行通配符替换。
因此,您需要将URL作为第一个参数传递,将查询字符串作为第二个参数传递:
remote:{
replace: function (url, query ) {
}
}