0

我正在尝试使用 jquery 在自动完成中显示一些城市，当任何人选择城市时，然后将目标 ID 设置为隐藏字段。我正在使用 Web 服务来获取 ajax 调用的数据。

这是我的网络服务方法：

 [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<BALDestinations> AuotExtenderDestination(string destinationname)
    {
        DataSet ds=objDestination.GetDestination(destinationname);
        List<BALDestinations> result = new List<BALDestinations>();
        foreach (DataRow dr in ds.Tables[0].Rows)
        {
            BALDestinations b = new BALDestinations();
            b.City = dr["City"].ToString();
            b.DestinationId = dr["DestinationId"].ToString();
            result.Add(b);
        }
        return result;
    }

这是我的 jquery 自动完成文本框扩展器的代码

<script type="text/javascript">
    $(document).ready(function () {
        SearchText();
        $('#btnSearch').click(function () {
            alert($("#hiddenAllowSearch").val());
        });
    });  
    function SearchText() {
        $(".txtdest").autocomplete({
            //   source: $local_source,
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "WebService.asmx/AuotExtenderDestination",
                    data: "{'destinationname':'" + $('.txtdest').val() + "'}",
                    dataType: "json",
                    success: function (data) {
                      response(data.d);                      
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            },
            focus: function (event, ui) {
                $(".txtdest").val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $(".txtdest").val(ui.item.label);
                $("#hiddenAllowSearch").val(ui.item.value);
                return false;
            }
        });
    } 
</script>

当我们在文本框中输入任何内容时，undefined 会出现在文本框中

4

2 回答 2

2

如果您从 Web 服务返回的类的属性不是label, 和value，那么 jQuery 自动完成代码将尝试从不存在的属性中读取值，从而出现您的undefined问题。

如果您不想更改您的类属性，您可以设置自动完成以查看您的实际属性名称。您可以在通过函数发送之前手动response(data.d)将类属性映射到label并手动映射，而不是仅仅调用：valueresponse

response($.map(data.d, function (item) {
    return { 
        label: item.City, 
        value: item.DestinationId
    };
}));
于 2012-07-16T17:59:07.780 回答
2

如果您想将城市、州/省和国家/地区名称添加到标签而不是单个城市名称，那么您可以扩展您的代码并将额外的值添加到自定义对象：

服务：

foreach (DataRow dr in ds.Tables[0].Rows)
{
    BALDestinations b = new BALDestinations();
    b.City = dr["City"].ToString();
    b.DestinationId = dr["DestinationId"].ToString();
    b.State = dr["State"].ToString();
    b.Province = dr["Province"].ToString();
    b.Country = dr["Country"].ToString();

    result.Add(b);
}

阿贾克斯success回调：

response($.map(data.d, function (item) {

    // return custom object
    var resultList = { 
        label: item.City + ", " + item.State + ", " +
               item.Province + "' " + item.Country, 
        value: item.DestinationId,

        // Alternatively, you can return the properties in
        // this object and display them via _renderItem     
        state: item.State, 
        province: item.Province, 
        country: item.Country 
    };

    return resultList;
}));

要在自动完成列表中显示州、省和国家/地区，请覆盖_renderItem：

$(".txtdest").autocomplete({
    source: function (request, response) {
        // etc.
    }
}).data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<a><strong>" + item.value + "</strong><br>" + item.state +
            " PROVINCE: " + item.province + " COUNTRY: " + item.country + "</a>")
    .appendTo(ul);
};
于 2012-07-16T21:17:06.513 回答