Display Google Place AutoComplete selected value in another TextBox in ASP.Net

Last Reply 8 months ago By pandeyism

Posted 8 months ago

hello,

i have this google auto complete it works fine i want to change some thing when user type in textbox1 and google places shows suggestion after selection result should show in  textbox3

same for text2 google place in txtbox2 and after selection result should show in text4

please advice

var textbox3 = $(this).find('[id*=txtfrom]');
var textbox1 = $(this).find('[id*=txosearch]');
  <script type="text/javascript">
      var fromAddress;
      var toAddress;
      $(function () {
          var textbox1 = $(this).find('[id*=txosearch]');
          var textbox2 = $(this).find('[id*=txtosearch]');
          var textbox3 = $(this).find('[id*=txtfrom]');
          var textbox4 = $(this).find('[id*=txtto]');
          ApplyAutoComplete(textbox1);
          ApplyAutoComplete(textbox2);
          $(textbox1).blur(function () {
              var address = $(this).val();            
              if (address == fromAddress) {
                  //$('[id*=lblFrom]').hide();                
                  this.textbox1.val("");                
              } else {
                  //$('[id*=lblFrom]').show();                
                  this.textbox1.val("");
              }
          });
          $(textbox2).blur(function () {
              var address = $(this).val();            
              if (address == toAddress) {
                  //$('[id*=lblTo]').hide();
                  this.textbox1.val("");
              } else {
                  //$('[id*=lblTo]').show();
                  this.textbox2.val("");
              }
          });
      });
      function ApplyAutoComplete(input) {
          google.maps.event.addDomListener(window, 'load', function () {
              var places;
              for (var i = 0; i < input.length; i++) {
                  var options = { types: ['(regions)'] };
                  places = new google.maps.places.Autocomplete(input[i], options);
              }
              google.maps.event.addListener(places, 'place_changed', function () {
                  if ($(input)[0].id == $('#<%=txtfrom.ClientID%>')[0].id) {
                        fromAddress = places.getPlace().formatted_address;
                        $('[id*=txtfrom]').val(fromAddress);
                        $('[id*=txtfrom]').trigger("blur");
                    } else if ($(input)[0].id == $('#<%=txtto.ClientID%>')[0].id) {
                        toAddress = places.getPlace().formatted_address;
                        $('[id*=txtto]').val(toAddress);
                        $('[id*=txtto]').trigger("blur");
                    }
                });
            });
        };
    </script>

 

 

You are viewing reply posted by: pandeyism 8 months ago.
Posted 8 months ago Modified on 8 months ago

Hi nauna,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=API_KEY"></script>
    <script type="text/javascript">
        var fromAddress;
        var toAddress;
        $(function () {
            var textbox1 = $(this).find('[id*=txtosearch]');
            var textbox2 = $(this).find('[id*=txtdsearch]');
            var textbox3 = $(this).find('[id*=txtfrom]');
            var textbox4 = $(this).find('[id*=txtto]');
            ApplyAutoComplete(textbox1);
            ApplyAutoComplete(textbox2);
            $(textbox1).blur(function () {
                var address = $(this).val();
                if (address == fromAddress) {
                    this.textbox1.val("");

                } else {
                    this.textbox1.val("");
                }
            });
            $(textbox2).blur(function () {
                var address = $(this).val();
                if (address == toAddress) {
                    this.textbox1.val("");

                } else {
                    this.textbox2.val("");
                }
            });
        });
        function ApplyAutoComplete(input) {
            google.maps.event.addDomListener(window, 'load', function () {
                var places;
                for (var i = 0; i < input.length; i++) {
                    var options = { types: ['(regions)'] };
                    places = new google.maps.places.Autocomplete(input[i], options);
                }
                google.maps.event.addListener(places, 'place_changed', function () {
                    if ($('#<%=txtfrom.ClientID%>').val() == "") {
                        fromAddress = places.getPlace().formatted_address;
                        $('[id*=txtfrom]').val(fromAddress);
                        $('[id*=txtosearch]').val("");
                        $('[id*=txtfrom]').trigger("blur");
                    } else if ($('#<%=txtto.ClientID%>').val() == "") {
                        toAddress = places.getPlace().formatted_address;
                        $('[id*=txtto]').val(toAddress);
                        $('[id*=txtdsearch]').val("");
                        $('[id*=txtto]').trigger("blur");
                    }
                });
            });
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="form-group col-md-2 padding2">
        <span class="none">Origin </span>
        <asp:TextBox ID="txtosearch" runat="server"></asp:TextBox>
        <asp:TextBox ID="txtfrom" runat="server"></asp:TextBox>
    </div>
    <div class="form-group col-md-2 padding2">
        <div runat="server" id="destination">
            <span class="none">Destination </span>
            <asp:TextBox ID="txtdsearch" runat="server" Height="22px"></asp:TextBox>
            <asp:TextBox ID="txtto" runat="server"></asp:TextBox>
        </div>
    </div>
    </form>
</body>
</html>

Screenshot