带有 ASP.NET Web 服务的 jQuery AutoComplete (jQuery UI 1.8rc3) [英] jQuery AutoComplete (jQuery UI 1.8rc3) with ASP.NET web service

问题描述

目前，当从 .ashx 处理程序返回 XML 时，我有这个版本的自动完成控件工作.xml 看起来像这样:

Currently, I have this version of the autocomplete control working when returning XML from a .ashx handler. The xml looks like this:

<?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>

自动完成代码如下所示:

The autocomplete code looks like this:

    $('.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 服务，但我无法让它工作.要切换到服务(为了简单起见，我正在做一个本地服务)，自动完成代码的开头是:

For various reasons, I'd rather be calling an ASP.NET web service, but I can't get it to work. To change over to the service (I'm doing a local service to keep it simple), the start of the autocomplete code is:

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

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

This code is on a page at the root of the site and the GeneralLookup.asmx is in a subfolder named Services. But a breakpoint in the web service never gets hit, and no autocomplete list is generated. In case it makes a difference, the XML that comes from the asmx is:

<?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 调用，对吗?

Functionally equivalent since I never use the name of the root node in the mapping code. I haven't seen anything in the jQuery docs about calling a .asmx service from this control, but a .ajax call is a .ajax call, right?

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

I've tried various different paths to the .asmx (~/Services/), and I've even moved the service to be in the same path to eliminate these issues. No luck with either.

有什么想法吗?

推荐答案

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

I got the autocomplete to work with .asmx by using JSON. Here is an example of what I did:

JavaScript:

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 Web 服务的 jQuery AutoComplete (jQuery UI 1.8rc3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！