当前位置: 首页 > 面试题库 >

Google Maps Places API V3自动完成-在输入时选择第一个选项

曹泉
2023-03-14
问题内容

我已经在输入框中成功实现了GoogleMapsPlacesV3自动完成功能。它工作得很好,但是我很想知道当用户按下Enter时如何使它从建议中选择第一个选项。我想我需要一些JS魔术,但是我对JS非常陌生,并且不知道从哪里开始。

提前致谢!


问题答案:

在我最近工作的网站上实现自动完成功能时,我遇到了同样的问题。这是我想出的解决方案:

$("input").focusin(function () {
    $(document).keypress(function (e) {
        if (e.which == 13) {
            var firstResult = $(".pac-container .pac-item:first").text();

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({"address":firstResult }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var lat = results[0].geometry.location.lat(),
                        lng = results[0].geometry.location.lng(),
                        placeName = results[0].address_components[0].long_name,
                        latlng = new google.maps.LatLng(lat, lng);

                        $(".pac-container .pac-item:first").addClass("pac-selected");
                        $(".pac-container").css("display","none");
                        $("#searchTextField").val(firstResult);
                        $(".pac-container").css("visibility","hidden");

                    moveMarker(placeName, latlng);

                }
            });
        } else {
            $(".pac-container").css("visibility","visible");
        }

    });
});


 类似资料:
  • 我正在使用ajax将数据从mysql加载到php。我想为我的网站创建编辑功能。此编辑将在模式上进行。在使用以前的ajax加载无线电输入类别之后,ajax将加载带有选项(子类别)的Select input。 我尝试了几个jquery事件来更改select选项,但都没有成功。这是我的模式文件中的脚本代码。 我也试过: 此外,这两个函数对于#子类别没有ajaxComplete,或者对于文档没有第二个aj

  • 我想创建一些表格与自动填充价格在输入框,但我不知道如何实现到我的代码。首先我有选择选项,然后选择选项后,输入框上的价格会自动生成,然后我输入折扣值,然后总价格会自动生成(基本价格-折扣%)。这是我的代码: null null

  • 我需要从自动完成搜索框中选择第一个元素,当自动完成显示其悬停的其他元素时,其他元素无法通过量角器点击,解决方案 element.all(by.css('[ng-model="地址"]')). get(0)对我不起作用,但在另一台计算机上工作,相同的脚本在另一台计算机上工作,我检查了量角器版本,硒版本 我也尝试element.all(by.css('[ng-model="地址"]')). first

  • 这是我的主页,在那里我选择了一个选项字段。 opt1.php: 这是我的javascript,在这里我从上面的select获得值,并传递给opt2.php 这是我的opt2.php页面,用于显示sub select。 实际上,这并没有产生预期的结果。 有没有逻辑上或处理上的错误?

  • 我有两个表A(id,col1,col2)和B(col3,col4,col5,col6) 这引发错误 为什么postgres不自动为列“id”生成值?如果我从表B中提供“id”,或者如果我插入单行(没有select)并为自动生成的列提供“default”关键字,查询就可以工作。 编辑:表创建查询

  • 问题内容: 在下方,您可以找到有关自动完成功能的MUI文档的示例,在该示例中,我已经在选项列表之前将链接传递给了google。但是,我无法单击该选项,事件目标只是MuiAutocomplete,而不是我正在传递的事件。 https://codesandbox.io/s/material-demo- egi6p 有趣的是,对自动完成功能开放 使它能够按预期工作。 目前,我正在使用onMouseDow