0

jquery を使用してオートコンプリートでいくつかの都市を表示しようとしています。都市を選択すると、目的地 ID が hidden フィールドに設定されます。私は ajax 呼び出しのデータを取得するために Web サービスを使用しています。

これが私のWebサービスメソッドです:

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

そこに何かを入力すると、未定義がテキストボックスに表示されます

4

2 に答える 2

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

Ajaxsuccessコールバック：

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 に答える
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 に答える