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

您有更改方法的“$("[id$=QueryManager]")” 是什么对象？如果您可以使用上面的代码，您是否需要更改事件？

编辑 确定一个更简单的方法是在“QueryManager”管理器下拉菜单上执行任何更改事件之前，将文本框“$("#QueryTxt")”设置为自动完成框。然后，当您的 "QueryManager" 中确实发生更改事件时，请调用：

$(this).autocomplete('search', '你的数据在这里');

然后将执行搜索功能并使用您所需的数据调用自动完成的 url

于 2013-03-11T18:47:00.310 回答