1

私はjQueryUIの初心者です。オートコンプリートのjQueryUIを使用したいので、次のコードを記述します。

 <script type="text/javascript">

        $(function () {



            $("#Text1").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Handler.ashx",
                        dataType: "json",
                        data: { term: request.term },
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {

                            response($.map(data.d, function (item) {
                                return {
                                    label: item.Label,
                                    value: item.Value

                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 1
            });
        }); 


</script>

およびHTMLコード：

  <input id="Text1" type="text" />

およびAutoCompleteHandler：

public void ProcessRequest(HttpContext context)
{

    List<Customer> cuslist = new List<Customer>();
    Customer cus = new Customer(1, "Mohsen");
    cuslist.Add(cus);
    cus = new Customer(2, "aa");
    cuslist.Add(cus);

    cus = new Customer(3, "bcb");
    cuslist.Add(cus);

    cus = new Customer(4, "cac");
    cuslist.Add(cus);

    cus = new Customer(5, "daad");
    cuslist.Add(cus);

    cus = new Customer(6, "ffaa");
    cuslist.Add(cus);

    cus = new Customer(7, "vvaav");
    cuslist.Add(cus);

    string name = context.Request.QueryString["term"];
    var items = cuslist.Where(c => c.Name.Contains(name));
    var list = new List<AutoComplete>();
    foreach (var item in items)
    {
        var i = new AutoComplete {Id = item.Id, Label = item.Name, Value = item.Name};
        list.Add(i);
    }
    string ss = JsonConvert.SerializeObject(list);
    context.Response.Write(ss);
}

およびオートコンプリートクラス：

public class AutoComplete
{
    public int Id { get; set; }
    public string Label { get; set; }
    public string Value { get; set; }

}

および顧客クラス

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public Customer(int id,string name)
    {
        Id = id;
        Name = name;
    }
}

ただし、textBoxへの書き込みは機能しないが、クライアントへのデータ送信はtrueの場合

ここに画像の説明を入力してください

しかし、データは表示されません。助けてください。皆さんありがとう

4

3 に答える 3

3

この記事で説明されているように、オートコンプリートコードと一緒にjQuery ajaxを使用する必要があると思います：http：//www.dotnetcurry.com/ShowArticle.aspx？ID=515。

さらに、オートコンプリートハンドラーがメソッドを指すようにする必要があります。ashxを使用する代わりに、代わりにWebサービス（.asmx）ファイルを使用する傾向がありました。

于 2012-04-23T08:16:22.323 に答える
3

私がこれを正しく読んだ場合：

success: function (data) {
    response($.map(data.Id, function (item) {
        return {
                  value: item.Value
               }
    }))
},

する必要があります：

success: function (data) {
    response($.map(data, function (item) {
        return {
                 label: item.Label
                 value: item.Value
               }
    }))
},

dataFilter:...この場合、あなたはあなたのために何もしません。

編集：asp.netを使用している場合は、次のコンバーターを使用してください：

converters: {
    "json jsond": function(msg) {
        return msg.hasOwnProperty('d') ? msg.d : msg;
    }
},

を処理するdata.d

EDIT2：最新の投稿に基づく：これを使用するように変更します（ここに例を示します）：jsonp、コンバーター、成功ハンドラーの変更、およびdataFilterの削除に注意してください。

$("#Text1").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "Handler.ashx",
            dataType: "jsonp",
            data: {
                term: request.term
            },
            contentType: "application/json",
            converters: {
                "json jsond": function(msg) {
                    return msg.hasOwnProperty('d') ? msg.d : msg;
                }
            },
            success: function(data) {
                response($.map(data, function(item) {
                    return {
                        label: item.Label,
                        value: item.Value
                    }
                }))
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 1
});
于 2012-04-23T12:22:18.257 に答える
2

あなたが投稿したスクリーンショットを見て、次の行に気づきました。

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

次に、スクリーンショットに戻って、JSONの結果にプロパティが含まれていないことを確認しました.d。おそらくそれが問題です。

PS：エラーイベント内でも応答関数を呼び出す必要があります（このページの最後から2番目の段落を参照）。

于 2012-04-23T13:55:50.100 に答える