将Google Maps自动完成功能与jquery自动完成功能集成

Question

我想将我的jQuery自动完成字段与Google地图集成在一起。 这样，该字段就会从我的预定义数组中得出结果，并同时解析为google maps。

我的代码：

var autocompleteService = new google.maps.places.AutocompleteService();
var autocompleteList = [];
var eventsList = ["event1","event2"];

$("#edtSearch").autocomplete({
        source: eventsList
}).on("autocompleteopen",function(event){
        autocompleteList = eventsList.slice(0);

        autocompleteService.getQueryPredictions({input: $(this).val()},
        function(predictions, status){
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                console.log(status);
                return;
            }

            for (var k = 0, prediction; prediction = predictions[k]; ++k)
            {
                prediction = String(prediction.description).replace(/,/g,"");
                autocompleteList.push(prediction);
            }

            $("#edtSearch").autocomplete({
                source: autocompleteList
            });
            $("#edtSearch").autocomplete("search");
            console.log(autocompleteList);
        });
});

HTML：

<input id="edtSearch" type="text" size="50" />

现在该代码可以工作了，但是由于“ autocompleteopen”和“ autocomplete（” search“）”调用的是相同的东西，因此我在操作中出现了一个重复循环，最终在控制台中出现了“ OVER_QUERY_LIMIT”。 我的问题是，如何正确绑定事件，以使它们不会递归调用？ 我试过使用

var edtSearch = document.getElementById("edtSearch");
edtSearch.addEventListener("keypress",function(){});

和类似的解决方案，但我得到的错误是“未捕获的错误：缺少参数。您必须指定输入”。 我怎么解决这个问题？

Answer 1

在您的情况下， getQueryPredictions调用中的input参数为未定义，空值或空字符串。

要解决此问题，您将检查要input的值$(this).val()在您的情况下$(this).val() ）是否包含某些字符。