Question

我正在尝试使用autocomplete中的Google Maps地图，我的整个代码可以正常运行：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core">

<h:head>

    <title>Places Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"></meta>
    <meta charset="utf-8"></meta>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"></link>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map-canvas, #map_canvas {
            height: 100%;
        }

        @media print {
            html, body {
                height: auto;
            }

            #map_canvas {
                height: 650px;
            }
        }

        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }

        input {
            border: 1px solid  rgba(0, 0, 0, 0.5);
        }
        input.notfound {
            border: 2px solid  rgba(255, 0, 0, 0.4);
        }
    </style>

    <script>
    // <![CDATA[
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(-33.8688, 151.2195),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

          var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
          var autocomplete = new google.maps.places.Autocomplete(input);

          autocomplete.bindTo('bounds', map);

          var infowindow = new google.maps.InfoWindow();
          var marker = new google.maps.Marker({
            map: map
          });

          google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infowindow.close();
            marker.setVisible(false);
            input.className = '';
            var place = autocomplete.getPlace();
            if (!place.geometry) {
              // Inform the user that the place was not found and return.
              input.className = 'notfound';
              return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
              map.fitBounds(place.geometry.viewport);
            } else {
              map.setCenter(place.geometry.location);
              map.setZoom(17);  // Why 17? Because it looks good.
            }
            marker.setIcon(/** @type {google.maps.Icon} */({
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(35, 35)
            }));
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

            var address = '';
            if (place.address_components) {
              address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
              ].join(' ');
            }

            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
            infowindow.open(map, marker);
          });

          // Sets a listener on a radio button to change the filter type on Places
          // Autocomplete.
          function setupClickListener(id, types) {
            var radioButton = document.getElementById(id);
            google.maps.event.addDomListener(radioButton, 'click', function() {
              autocomplete.setTypes(types);
            });
          }

          setupClickListener('changetype-all', []);
          setupClickListener('changetype-establishment', ['establishment']);
          setupClickListener('changetype-geocode', ['geocode']);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    // ]]>
    </script>
</h:head>

<h:body>
    <div id="panel" style="margin-left: -260px">
        <h:inputText id="searchTextField" value="#{propertyC.property.street}" size="100" >
            <f:ajax listener="#{propertyC.showAddress}" />
        </h:inputText>
    </div>

    <div id="map-canvas"></div>

</h:body>
</html>

但我想将此自动完成操作的结果保存到我的bean属性propertyC.property.street中。

我该怎么做？

Answer 1

输入组件需要进入表单组件，当通过JS方式更改值并依赖于change事件时，您还应该通过onchange()函数调用手动触发事件。 HTML DOM元素。

因此，在表格中：

<h:form id="searchForm">
    <h:inputText id="searchTextField" value="#{propertyC.property.street}" size="100">
        <f:ajax listener="#{propertyC.showAddress}" />
    </h:inputText>
</h:form>

并相应地修复JS代码以包含表单ID并触发更改事件：

var input = document.getElementById("searchForm:searchTextField");
input.value = newvalue;
input.onchange();

Answer 2

尝试

document.getElementById(panel:searchTextField).value = <value you need to set>.

如何在JSF中将Javascript动态保存到Bean中？

2 个答案: