将谷歌地图自动完成与 jquery 自动完成集成答案

【问题标题】：Integrate google maps autocomplete with jquery autocomplete将谷歌地图自动完成与 jquery 自动完成集成
【发布时间】：2014-11-24 17:57:42
【问题描述】：

我想将我的 jQuery 自动完成字段与谷歌地图集成。这样该字段就会从我的预定义数组中显示结果，并同时解析为谷歌地图。

我的代码：

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(){});

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

【问题讨论】：

标签： javascript jquery google-maps autocomplete

【解决方案1】：

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

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

【讨论】：