Please follow the step to create the bug
1. Create user control name it "googleautocomplete"
2. paste google auto complete code so here would be your html of user control
<%@ control language="C#" autoeventwireup="true" codebehind="googleautocomplete.ascx.cs"
inherits="EcheckCallV2.Test.googleautocomplete" %>
<script type="text/javascript">
$(function () {
ApplyAutoComplete($('[id*=txtosearch]'));
ApplyAutoComplete($('[id*=txtdsearch]'));
});
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 () {
$(input).parent().find('input').eq(1).val(places.getPlace().formatted_address);
$(input).val('');
$(input).parent().find('input').eq(1).trigger("blur");
});
});
};
</script>
<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>
3. Create aspx page name it as "Auto"
4. Drag user control "googleautocomplete" 2 times
5. here would be your Auto.aspx page html
6. if you try to run the page the script won't give expected output
probably we drag user control twice therefore it is not working but i have requirement to drag this user control twice on one page .
<%@ page language="C#" autoeventwireup="true" codebehind="Auto.aspx.cs" inherits="EcheckCallV2.Test.Auto" %>
<%@ register src="~/Test/googleautocomplete.ascx" tagprefix="uc1" tagname="googleautocomplete" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form2" runat="server">
<div>
<uc1:googleautocomplete runat="server" id="googleautocomplete" />
<uc1:googleautocomplete runat="server" id="googleautocomplete1" />
</div>
</form>
</body>
</html>
