使用ASP.NET Web服务的jQuery AutoComplete(jQuery UI 1.8rc3)

前端之家收集整理的这篇文章主要介绍了使用ASP.NET Web服务的jQuery AutoComplete(jQuery UI 1.8rc3)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
目前,当从.ashx处理程序返回XML时,我有这个版本的自动完成控件. xml看起来像这样:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
<States>
<State>
  <Code>CA</Code> 
  <Name>California</Name> 
</State>
<State>
  <Code>NC</Code> 
  <Name>North Carolina</Name> 
</State>
<State>
  <Code>SC</Code> 
  <Name>South Carolina</Name> 
</State>

自动完成代码如下所示:

$('.autocompleteTest').autocomplete(
    {
        source: function(request,response) {
            var list = [];
            $.ajax({
                url: "http://commonservices.qa.kirkland.com/StateLookup.ashx",dataType: "xml",async: false,data: request,success: function(xmlResponse) {
                    list = $("State",xmlResponse).map(function() {
                        return {
                            value: $("Code",this).text(),label: $("Name",this).text()
                        };
                    }).get();
                }
            });
            response(list);
        },focus: function(event,ui) {
            $('.autocompleteTest').val(ui.item.label);
            return false;
        },select: function(event,ui) {
            $('.autocompleteTest').val(ui.item.label);
            $('.autocompleteValue').val(ui.item.value);
            return false;
        }

    });

出于各种原因,我宁愿调用ASP.NET Web服务,但我无法让它工作.要切换到服务(我正在做本地服务以保持简单),自动完成代码的开头是:

$('.autocompleteTest').autocomplete(
    {
        source: function(request,response) {
            var list = [];
            $.ajax({
                url: "/Services/GeneralLookup.asmx/StateList",

代码位于站点根目录的页面上,GeneralLookup.asmx位于名为Services的子文件夹中.但是Web服务中的断点永远不会被命中,并且不会生成自动完成列表.如果它有所不同,来自asmx的XML是:

<?xml version="1.0" encoding="utf-8" ?> 
<string xmlns="http://www.kirkland.com/"><State> <Code>CA</Code> <Name>California</Name> </State> <State> <Code>NC</Code> <Name>North Carolina</Name> </State> <State> <Code>SC</Code> <Name>South Carolina</Name> </State></string>

功能相同,因为我从未在映射代码中使用根节点的名称.我没有在jQuery文档中看到有关从此控件调用.asmx服务的任何内容,但.ajax调用是一个.ajax调用,对吧?

我尝试过.asmx(〜/ Services /)的各种不同路径,我甚至将服务移到同一路径以消除这些问题.两者都没有运气.

有任何想法吗?

解决方法

我通过使用JSON获得了使用.asmx的自动完成功能.这是我做的一个例子:

JavaScript的:

$("#tbNameFilter").autocomplete({
    source: function (request,response) {
        $.ajax({
            url: "/Services/AutocompleteService.asmx/Aoi_Autocomplete",data: "{ 'q': '" + request.term + "','limit': '10' }",dataType: "json",type: "POST",contentType: "application/json; charset=utf-8",dataFilter: function (data) { return data; },success: function (data) {
                response($.map(data.d,function (item) {
                    return {
                        label: item.Name,value: item.Name
                    }
                }))
            }
        });
    },minLength: 1
});

网络服务:

[WebMethod]
public List<FAD_Aoi> Aoi_Autocomplete(String q,int limit)

猜你在找的asp.Net相关文章