Question

我想将我的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" />

现在这段代码有效，但因为＆＃34; autocompleteopen＆＃34;和＃34;自动完成（＆＃34;搜索＆＃34;）＆＃34;调用相同的东西，我得到了一个重复循环的动作，并最终＆＃34; OVER_QUERY_LIMIT＆＃34;在控制台中。我的问题是，如何正确绑定事件，以便他们不会递归地互相呼叫？我尝试过使用

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

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

Answer 1

您案例中input调用中的getQueryPredictions参数未定义，为null或空字符串。

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

使用jquery自动完成功能集成谷歌地图自动完成功能

1 个答案: