繁体   English   中英

jQuery自动完成功能使用ASP.NET MVC Web API 2数据集成到PHP JSON

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

我有asp.net MVC Web API 2网址。 我需要使用将Web API数据集成到PHP应用程序搜索中,并自动完成数据(邮政编码显示列表)。 这些在我的jQuery和PHP搜索页面代码下面,但对我不起作用。 请告诉我为什么?

这是asp.net mvc web api 2 JSON返回值。

[{"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"}

这是我的jQuery代码

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'];
}

不知道您走了多远,但是一种解决方案是包装来自服务器(PHP)或WebAPI的http请求,并允许自动完成功能消耗本地请求:

        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; }
    }

客户端,您正确无误:

 $(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
                            };
                        }));
                    }
                });
            }
        });          
});

结果如下:

在此处输入图片说明

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM