当 typeahead 建议为 selected/autocomplete with tab 键时，如何绑定自定义函数？

Question

我正在使用这个 jQuery 插件 typeahead-addresspicker, allowing to get suggestion from Google, as showed in this demo。（我正在使用没有显示地图的插件）

当用户 select 从建议的结果列表中选择一个元素时，我成功使用了插件的事件。

但是当用户 select 使用 Tab 建议的 ("typeaheaded") 条目时，我没有设法绑定自定义函数。（使用 typeahead 版本的插件的全部意义）

Update: in (2), I've managed to get the correct event fired, but not the correct result, see at the end.

这是我试过的方法：

<html>
    <head>
        <title>Exemple</title>
    </head>
    <body>
        <input type="text" id="address" />
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
        <script src="jquery-2.0.2.min.js"></script>
        <script src="typeahead.bundle.min.js"></script>
        <script src="typeahead-addresspicker.min.js"></script>
        <script type="text/javascript"> 
            $(document).ready(function ()
            {
                var addressPicker = new AddressPicker();
                $('#address').typeahead({
                    highlight: true
                }, {
                    displayKey: 'description',
                    source: addressPicker.ttAdapter()
                });

                //Works, planned in the plugin
                $(addressPicker).on('addresspicker:selected', function (event, result) {
                    setResults(result);
                });

                //Doesn't work
                $(addressPicker).on('typeahead:selected', function (event, result) {
                    setResults(result);
                });

                //(1) Doesn't work too
                $(addressPicker).on('typeahead:autocomplete', function (event, result) {
                    setResults(result);
                });


                $('#address').on('typeahead:autocomplete', function (event, result) {
                    setResults(result);
                });

                //(2) This almost works, I've got the event fired, but no luck running correctly setResult with it
                function setResults(result) {
                    console.log(result);
                    var premise = result.nameForType("premise"); //(3)
                    console.log(premise);
                }
            }
        </script>       
    </body>
</html>

(1) 直接看typeahead.js doc and experimenting with their demo page，当我通过控制台添加以下代码时：

$('#demo-input').on('typeahead:autocomplete', function(ev, suggestion) {
  console.log('autocomplete : ' + suggestion);
});

我成功地通过 Tab 捕获了有关自动完成建议的事件，而无需从按键事件中拦截它。

~~现在我只需要让它适用于 typeahead-addresspicker...~~

(2) 当事件被正确触发时，returned 的结果与 addresspicker:selected 事件不同，留置权 (3) return 这个错误：

TypeError: result.nameForType is not a function

我知道 typeahed:autocomplete 事件 return 生成的对象类型不是预期的类型，因此引发了错误。

我现在正在搜索如何获取正确的对象类型以及如何将其传递给 addressPicker。

Answer 1

如果您愿意将您的绑定移动到文档（或任何高于 addressPicker 的元素），那么您也将能够捕获预输入事件。

这些应该仍然有效：

$(document).on('addresspicker:selected', function (event, result) { setResults(result);});

$(document).on('typeahead:selected', function (event, result) { setResults(result); });

$(document).on('typeahead:autocomplete', function (event, result) { setResults(result); });

Answer 2

我终于设法通过添加此代码使其正常工作，通常用于更新地图，但即使我使用不带地图的地址选择器，它也会以正确的结果类型触发正确的事件：

$('#address').bind("typeahead:autocompleted", addressPicker.updateMap);

如果谁有合适的方法达到同样的效果，我就采纳！

当 typeahead 建议为 selected/autocomplete with tab 键时，如何绑定自定义函数？

How to bind a custom function when the typeahead suggestion is selected/autocomplete with tab key?

javascript

jquery

twitter-typeahead