Twitter的提前输入示例/动态查询 [英] Twitter's typeahead example / dynamic query
问题描述
我正在搜索 twitter的提前输入的示例.
我想通过函数获取数据,我应该使用远程功能吗?
服务器数据返回的将是Json(不仅仅是数组).
从那些我只想显示字段例如name
.
I want to get the data with a function, should I use remote?
The returned from the server data would be a Json (not simply an array).
From those I want to display only the field e.g. name
.
选择正确的name
后,我想运行另一个功能,例如提醒该对象的id
和description
(字段).可能使用 typeahead:autocompleted
事件绑定器?
Upon selection of the correct name
I want to run another function that e.g. alerts the id
and the description
(fields) of that object. Probably with typeahead:autocompleted
event binder ?
更新/示例:
下面的Dajaxice.async.get_closest_events()
将3个参数发送到内部服务器(lat,lng,query).查询是用户编写的值.它返回一个数组(venuesNames
),该数组将显示在下拉列表中.
The Dajaxice.async.get_closest_events()
bellow sends 3 parameters to the internal server (lat,lng, query). Query is the value the users has written. It returns an array (venuesNames
) which is going to be displayed in the dropdown.
$( "#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
...
}
推荐答案
Here's a good example of using a json response: How to render JSON response using latest typeahead.js library.
然后为了绑定事件,您可以将上述建议与类似的内容组合在一起:
And then to bind the event, you'd combine the above suggestion with something like:
$('.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: 关于查询参数,您的函数调用编写不正确.根据文档:
Update 1: Regarding the query parameter, your function call is written incorrectly. According to the docs:
replace –具有签名replace(url,uriEncodedQuery)的函数 可以用来覆盖请求网址.预期返回 有效的网址.如果设置,则不会在网址上执行通配符替换.
replace – A function with the signature replace(url, uriEncodedQuery) that can be used to override the request URL. Expected to return a valid URL. If set, no wildcard substitution will be performed on url.
因此,您需要将URL作为第一个参数,并将查询字符串作为第二个参数:
So you need to pass the URL as the first parameter, and the query string as the second:
remote:{
replace: function (url, query ) {
}
}
这篇关于Twitter的提前输入示例/动态查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!