推特的提前输入示例/动态查询

Twitter's typeahead example / dynamic query

本文关键字：动态 查询 输入      更新时间：2023-09-26

我正在寻找Twitter的typeahead示例。

我想通过函数获取数据，我应该使用远程吗？从服务器返回的数据将是一个 Json（而不仅仅是一个数组）。从那些我只想显示字段，例如 name .

选择正确的name后，我想运行另一个函数，例如提醒该对象的id和description（字段）。可能带有typeahead:autocompleted事件活页夹？

更新/示例：

Dajaxice.async.get_closest_events()向内部服务器发送 3 个参数（纬度、lng、查询）。查询是用户写入的值。它返回一个数组（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
...
}
下面是

使用 json 响应的一个很好的例子：如何使用最新的 typeahead.js 库呈现 JSON 响应。

然后，要绑定事件，请将上述建议与以下内容相结合：

$('.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 ) {
    }
}
相关文章：