Please refer this code. Though i have used the Northwind Customer table here but it’s searching the data in Google if the records are not found in the table.
Ref:
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var data = {};
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
//google.maps.event.addDomListener(window, 'load', SearchPlaces);
function SearchPlaces() {
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
var latlng = new google.maps.LatLng(21.7679, 78.8718);
var myOptions =
{
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var searchBox = (document.getElementById('<%=txtSearch.ClientID %>'));
var svalueBox = new google.maps.places.SearchBox(searchBox);
}
$(document).ready(function () {
$("#<%=txtSearch.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Default.aspx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
//If no data, search in Google Places API.
if (data.d.length == 0) {
$('.ui-autocomplete').hide();
debugger;
SearchPlaces(this.id);
}
else {
$('.pac-container').hide();
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
}
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
},
minLength: 1
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfCustomerId" runat="server" />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</form>
</body>
</html>
Namespaces
using System.Data.SqlClient;
using System.Web.Services;
using System.Configuration;
C#
[WebMethod]
public static string[] GetCustomers(string prefix)
{
List<string> customers = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select ContactName, CustomerId from Customers where " +
"ContactName like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format("{0}-{1}", sdr["ContactName"], sdr["CustomerId"]));
}
}
conn.Close();
}
return customers.ToArray();
}
}
Screenshot
From Database
From Google
