1

私は自分の問題を解決しようとずっと探してきました。私はそれが私のバックエンドにあるかもしれないと思っていますが、確かではありません。オートコンプリートを使用してテキストボックスに入力しようとしていますが、ドロップダウンに値の説明を表示しています。

データを取得するための私の方法:

[WebMethod]
public static ArrayList GetQueries(string id)
{
    queries q;
    var cs = Global.CS; 
    var con = new SqlConnection(cs);
    var da = new SqlDataAdapter(querystring, con);
    var dt = new DataTable();
    da.Fill(dt);

    ArrayList rows = new ArrayList(dt.Rows.Count);
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        var val = dt.Rows[i]["Query_ID"];
        var des = dt.Rows[i]["Description"];

        q = new queries();
        q.label = val.ToString();
        q.value = val.ToString() + " -- " + des.ToString();

        var json = new JavaScriptSerializer().Serialize(q);

        rows.Add(json);
    }
    return rows;
}

public class queries
{
    public string label { get; set; }
    public string value { get; set; }
}

配列リストを返しています。

データとオートコンプリートを取得するための私の JQuery メソッド。

$("[id$=QueryManager]").change(function () {
    var id = $("[id$=QueryManager] :selected").val();
    $.ajax({
        type: 'POST',
        url: 'Upload.aspx/GetQueries',
        data: JSON.stringify({ id: id }),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            fillit(data);
        },
        error: function (ex) {
            alert('Request Status: ' + ex.status + '\n\nStatus Text: ' + ex.statusText + '\n\n' + ex.responseText);
        }
    });
});

    function fillit(data) {
        $("#QueryTxt").autocomplete({
            delay: 0,
            minLength: 0,
            source: function (data, response) {                
                response($.map(data, function (item) {
                    return {
                        label: item.label,
                        value: item.value
                    }
                }));
            }                
        });
    };

シリアライズありとなしの両方で試してみましたが、結果はありません。このコードを実行すると、オートコンプリートが機能していることが示されますが (下に表示されるボックスを介して)、データはありません。

何が間違っているのかわかりません。助けていただければ幸いです。

4

1 に答える 1

0

以下で私が行っているのは、「選択」イベントで、クエリから返された値を取得し、ドロップダウンのテキストを、返されたデータの説明と Id 値に設定することです。次に、ダミーのテキスト ボックスの値を説明として設定します。「colDescName」は、テキストボックス ID として使用していた単なる変数です。

    $("#" +colDescName).autocomplete({
                minLength: 2,
                    select: function( event, ui ) 
                    {
                        var rowElement=event.target.id;//Drop down Id
                        setTimeout(function()
                        {
                              $("#"+rowElement).val(ui.item.value+':'+ui.item.id)
                        },100);//need a slight delay here to set the value
                        $("#TextBoxId").val(ui.item.value);
                        //ui.item.value  is the description in the drop down.
                        //ui.item.id  is the Id value from the drop down
                    },
                source: function (request, response) {
                    var term = request.term;
                    if (term in cache) {
                        response(cache[term]);
                        return;
                    }
                    lastXhr = $.getJSON("Upload.aspx/GetQueries", request, function (data, status, xhr) {
                        cache[term] = data;
                        if (xhr === lastXhr) {
                            response(data);
                        }
                    }).error(function () {
                        console.log("error"); 
                        }); 
                } 
            });

change メソッドがある "$("[id$=QueryManager]")" はどのオブジェクトですか? 上記のコードを使用できる場合、変更イベントが必要ですか?

EDIT OK より簡単な方法は、「QueryManager」マネージャー ドロップダウンで変更イベントを実行する前に、テキスト ボックス「$("#QueryTxt")」をオートコンプリート ボックスに設定することです。次に、「QueryManager」で変更イベントが発生したときに、次を呼び出します。

$(this).autocomplete('search', 'あなたのデータはこちら');

次に、検索機能を実行し、必要なデータでオートコンプリートの URL を呼び出します

于 2013-03-11T18:47:00.310 に答える