Question

我正在使用这个jQuery插件typeahead-addresspicker，允许从Google获得建议，如this demo所示。（我正在使用没有显示地图的插件）

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

但是当用户选择带有 Tab 的建议（“typeaheaded”）条目时，我没有设法绑定自定义函数。（使用插件的预先版本的重点）

更新：在（2）中，我设法获得了正确的事件，但没有正确的结果，见最后。

这是我尝试过的：

<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并尝试their demo page，当我通过控制台添加以下代码时：

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

我成功设法通过 Tab 在自动完成建议时捕获事件，而不必从按键事件中截取它。

~~现在我必须让它适用于typeahead-addresspicker ...~~

（2）当事件被正确触发时，返回的结果与addresspicker:selected事件不同，并且lien（3）返回此错误：

TypeError：result.nameForType不是函数

我知道typeahed:autocomplete事件返回的对象类型不是预期的，会引发错误。

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

Answer 1

我终于设法通过添加此代码来实现它，通常用于更新地图，但即使我使用没有地图的地址选择器，它也会使用正确的结果类型触发正确的事件：

class="day"

如果有人有正确的方法来达到相同的结果，我会接受它！

Answer 2

如果您愿意将绑定移动到文档（或实际上任何高于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); });

使用tab键选择预先输入/自动完成时如何绑定自定义函数？

2 个答案: