Question

我正在尝试使用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会出现在文本框中

Answer 1

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

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

response($.map(data.d, function (item) {
    return { 
        label: item.City, 
        value: item.DestinationId
    };
}));

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

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

在asp.net中，jquery自动完成标签值未定义

2 个答案: