2

我有一个网页，人们可以在其中输入多个目的地。当他们声明他们想进入一个新的目的地时，当前的字段值存储在数组中。如果他们选择返回之前的目的地，相关值将重新插入到表单字段中。

我正在使用链接到自动完成的搜索字段作为目的地的可见显示。当我尝试将一个值放入链接的搜索字段时，该值显示为好像它是一个占位符而不是一个值。输入该字段，该值会被onFocus()Google Places 自动完成加载项的事件删除。

如何重新插入值并将其识别为值而不是占位符。

表单中的字段定义：

<label for="GoogleDestSrch" class="inputText">Destination: 
<span id="DestinationDisplay2">1</span>   
<span class="required"><font size="5"> * </font></span></label>
<input id="GoogleDestSrch" type="text" size="50" placeholder="Please enter your destination" />

Google Places API 监听器的初始化代码：

var input = document.getElementById('GoogleDestSrch');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
  fillInAddress();
});

在重新加载先前的目的地时尝试将值重新插入搜索字段：

form.GoogleDestSrch.value = GoogleDestSrch[index];


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Issue With Google Places</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false&amp;libraries=places&amp;language=en"></script>

    <script language="JavaScript" type="text/javascript">
    <!--
        var lastIndex = 1;
        var GoogleDestSrch = new Array();

        function GotoDestination(index) {
            var domove = true;
            if (index == 0) {
                index = lastIndex + 1;
            }
            else {
                if (index == -1) {
                    index = lastIndex - 1;
                    if (index == 0) {
                        index = 1;
                        domove = false;
                    }
                }
            }

            if (domove) {
                if (index != lastIndex) {
                    var doc = window.document;
                    var pdbutton = doc.getElementById("pdbutton");
                    var pdbutton1 = doc.getElementById("pdbutton1");
                    if ((index > lastIndex)) {
                        // move to next destination
                           saveDataF(lastIndex);
                           loadDataF(index);
                           lastIndex = index;
                    } else if (index <= lastIndex) {
                        // move to previous destination 
                           saveDataF(lastIndex);
                           loadDataF(index);
                           lastIndex = index;
                    }
                }
            }
        }


        var input;
        var autocomplete;

        // fill in the Google metadata when a destination is selected 
        function fillInAddress() {
            var strFullValue = '';
            var strFullGeoValue = '';
            var place = autocomplete.getPlace();
            document.getElementById("GoogleType").value = place.types[0];
        }

        function saveDataF(index) {

            var fieldValue;
            var blankSearch = "Please enter";  // placeholder text for Google Places 

            fieldValue = document.getElementById("GoogleDestSrch").value;
            if (fieldValue.indexOf(blankSearch) > -1) { fieldValue = ""; }
            GoogleDestSrch[index] = fieldValue;

        }

        function loadDataF(index) {
            if ((GoogleDestSrch[index] + "") == "undefined") {
                document.getElementById("GoogleDestSrch").value = "";
            } else {
                document.getElementById("GoogleDestSrch").value = GoogleDestSrch[index];
            }
        }
    // -->
    </script>
    </head>
    <body>
        <form name="input" action="html_form_action.asp" method="get">

            <input id="destPointer" type="text" size="50" style="display:none" value="0" />
            <input id="fieldOne" type="text" size="50" placeholder="Tab from here" /><br />
            <label for="GoogleDestSrch" class="inputText">Destination: 
            <span id="DestinationDisplay2">1</span> <span class="required"><font size="5"> * 
            </font></span></label>
            <input id="GoogleDestSrch" type="text" size="50" placeholder="Please enter your destination" /><br />
            <label>Type of place</label><input id="GoogleType" type="text" size="50" /><br />
            <input id="fieldTwo" type="text" size="50" placeholder="Tab to here" />
            <br />
            <input type="button" value="Previous destination" onclick="javascript:GotoDestination(-1);" />
            <input type="button" value="Next destination" onclick="javascript:GotoDestination(0);" />
        <script type="text/javascript">
            //<![CDATA[
            input = document.getElementById('GoogleDestSrch');
            autocomplete = new google.maps.places.Autocomplete(input);
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                fillInAddress();
            });
            //]]>
        </script>
        </form>
    </body>
</html>
4

0 回答 0