autocomplete - 如何使用带有标签输入的地理位置添加标签？

Question

我想添加谷歌地理位置地址的标签输入。

我正在使用这个地理位置 自动填充地址 + Google Maps API

这是引导标签输入。 http://timschlechter.github.io/bootstrap-tagsinput/examples/

如果我键入地址并选择自动完成地址，它应该转换为像引导标签这样的标签。

Answer 1

我使用带有引导标签输入的 Twitter Typeahead 的解决方案：

        var locations = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('formatted_address'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            identify: function (obj) {
                return obj.place_id;
            },
            remote: {
                url: 'https://maps.googleapis.com/maps/api/geocode/json?address=%QUERY&language={YOUR_LANGUAGE}&key={YOUR_MAPS_API_KEY}',
                wildcard: '%QUERY',
                rateLimitWait: 100,
                transform: function (response) {
                    if (response.status === 'OK') {
                        return response.results;
                    } else {
                        return [];
                    }
                }
            }
        });
        $('input').tagsinput({
            itemValue: 'place_id',
            itemText: 'formatted_address',
            typeaheadjs: [{
                highlight: true
            }, {
                displayKey: 'formatted_address',
                source: locations
            }],
            trimValue: true
        });