Twitter的先行示例/动态查询

时间:2013-10-02 01:12:59

标签: javascript jquery twitter typeahead typeahead.js

我正在搜索twitter's typeahead的示例。

我想用函数获取数据,我应该使用远程吗? 从服务器数据返回的将是Json(不仅仅是一个数组)。 从那些我想只显示字段,例如name

选择了正确的name后,我想运行另一个功能,例如提醒该对象的iddescription(字段)。可能与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
...
}

1 个答案:

答案 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 ) {
    }
}