Monday 18 September 2017

A-Map (china map) with auto complete textbox in web

Controller like: 

 public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
      [HttpPost]
        public ActionResult Index(string Address, string LatLong)
        {
            ViewBag.Message = "Address: " + Address+ " Lat Long: " + LatLong;
            return View();
        }
 }

CShtml page :

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

   
    <script>
        $(function () {
            $("#Address").autocomplete({
                source: function (request, response) {
                    var Address = [];
                    $.ajax({
                        url: 'http://restapi.amap.com/v3/place/text',
                        data: { key: "Your API key", keywords: request.term },
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            var results = jQuery.parseJSON(JSON.stringify(data));
                            var i;
                            var items = results.pois;
                             //declare a new object.
                        for (i = 0; i < items.length; i++) {
                                var objectInResponse = items[i];
                                var listobj = { label: objectInResponse.address + "," + objectInResponse.cityname, val: objectInResponse.location }
                              
                            
                                Address.push(listobj)
                            }
                            ///alert(JSON.stringify(Address));
                            response($.map(Address, function (item) {
                                return item;
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("#LatLong").val(i.item.val);
                },
                minLength: 1
            });
        });
    </script>


    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="text" id="Address" name="Address" />
        <input type="hidden" id="LatLong" name="LatLong" />
        <br /><br />
        <input type="submit" id="btnSubmit" value="Submit" />
        <br /><br />
        @ViewBag.Message
    }
  
</body>
</html>

No comments:

Post a Comment