jQuery autocomplete use asp.net mvc web api 2 data integrate to PHP JSON

Question

I have asp.net mvc web api 2 url. I need to use that web API data integrate to PHP application search and data(postcode display list) auto complete. These below my jQuery and PHP search page code, but it is not working for me. Please tell me why was that?

This is asp.net mvc web api 2 JSON return values.

[{"ID":6,"SuburbName":"Carlton North","postcode":"3054","Territory":"MEL-Brunswick","Latitude":-  37.7845911,"Longitude":144.972883,"AuState":"VIC","created":"13/03/2015 12:00:00 AM","updated":"13/03/2015 12:00:00 AM"}
[{"ID":7,"SuburbName":"Carlton South","postcode":"3054","Territory":"MEL-Brunswick","Latitude":-    37.7845911,"Longitude":144.972883,"AuState":"VIC","created":"13/03/2015 12:00:00 AM","updated":"13/03/2015 12:00:00 AM"}

This is my jQuery code

var searchRequest = null;
$(".auto").autocomplete({
    maxLength: 5,
    source: function(request, response) {
        if (searchRequest !== null) {
            searchRequest.abort();
        }
        searchRequest = $.ajax({
            url: 'asp.net mvc api web url',
            method: 'post',
            dataType: "json",
            data: {term: request.term},
            success: function(data) {
                searchRequest = null;
                response($.map(data.items, function(item) {
                    return {
                        value: item.SuburbName,
                        label: item.SuburbName
                    };
                }));
            }
        }).fail(function() {
            searchRequest = null;
        });
    }
});

<form method="POST" action="search.php">
  Enter your Postcode: 
  <input type="text" name="search" >
  <input name="submit" type="submit" class="auto" value="<?php echo $_POST['search'];?>" /><br />
</form>

if(isset($_POST['submit']))
{
  $value=$_POST['search'];
}

Answer 1

Not sure how far you've gone, but one solution would be to wrap http request from the server (PHP) or WebAPI and allow autocomplete to consume local request:

        public IEnumerable<Locations> GetLocations(string pcode)
    {
        var client = new HttpClient();
        client.BaseAddress = new Uri("http://www.tlcnewsletter.com.au/api/");
        client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
        var response = client.GetAsync("api/values?pcode=" + pcode).Result;
        if (response.IsSuccessStatusCode)
        {
            var res = response.Content.ReadAsAsync<IEnumerable<Locations>>().Result;
            return res;
        }

        return null;
    }

    public class Locations
    {
        public string ID { get; set; }
        public decimal Latitude { get; set; }
        public decimal Longitude { get; set; }
        public string SuburbName { get; set; }
        public string Territory { get; set; }
        public string postcode { get; set; }
    }

Client side, you've got it correct:

 $(document).ready(function () {

        $(".auto").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/api/values",
                    dataType: "json",
                    type: 'GET',
                    data: { pcode: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                value: item.SuburbName,
                                label: item.SuburbName
                            };
                        }));
                    }
                });
            }
        });          
});

Here is a result: