Question

我的要求是我有2个控件代码和说明，当我选择代码说明时会自动显示并且我想选择多个代码自动在描述控件中显示多个描述而反之亦然

对于这种情况，我应该使用页面方法使用“自动完成框”，这是我第一次使用Telerik控件。

现在，我可以在代码自动完成框中获取代码并能够选择多个代码。

现在我的问题是如何在使用Java script / jQuery选择多个代码后选择描述？

我的代码如下所示

<telerik:RadAutoCompleteBox ID="RdAutoClassCode" runat="server" Width="150" DropDownHeight="150"
            DropDownWidth="150" TokensSettings-AllowTokenEditing="True" OnClientTextChanged="OnClientChange" on>
            <WebServiceSettings Method="GetISOCodesRadCombobox" Path="GetClassCodeAndDescription.aspx" />
        </telerik:RadAutoCompleteBox>

 function OnClientChange() {
        debugger;
        alert("Hi");
       }

使用上面的代码不会触发文本更改事件。

请提供任何样品吗？

提前致谢，
斯里韦德亚

Answer 1

jQuery("#textbox").blur(function() {
  ajaxFunction(jQuery("#textbox").val());
});

function ajaxFunction(code){
// Your ajax call
}

尝试这个希望完全有这个帮助。

Answer 2

我终于得到了解决方案。

<telerik:RadAutoCompleteBox ID="RdAutoClassCode" runat="server" Width="150" DropDownHeight="70"
            OnClientEntryRemoved="RemoveEntry" OnClientEntryAdded="addNewEntry" height="150" DropDownWidth="150"
            TokensSettings-AllowTokenEditing="True">
            <WebServiceSettings Method="GetISOCodesRadCombobox" Path="GetClassCodeAndDescription.aspx" />
        </telerik:RadAutoCompleteBox>

<telerik:RadAutoCompleteBox ID="RdAutoClassDesc" runat="server" Width="150" DropDownHeight="70"
            height="150" DropDownWidth="150" TokensSettings-AllowTokenEditing="True">
            <WebServiceSettings Method="GetISOCodeDescriptionsRadCombobox" Path="GetClassCodeAndDescription.aspx" />
        </telerik:RadAutoCompleteBox>

网络方法：

[WebMethod]
    public static AutoCompleteBoxData GetISOCodesRadCombobox(object context)
    {
        string searchString = ((Dictionary<string, object>)context)["Text"].ToString();
        DataTable data = GetData(searchString, 0);
        List<AutoCompleteBoxItemData> result = new List<AutoCompleteBoxItemData>();

        foreach (DataRow row in data.Rows)
        {
            AutoCompleteBoxItemData childNode = new AutoCompleteBoxItemData();
            childNode.Text = row["CodeNumber"].ToString();
            childNode.Value = row["CodeNumber"].ToString();
            result.Add(childNode);
        }

        AutoCompleteBoxData res = new AutoCompleteBoxData();
        res.Items = result.ToArray();

        return res;
    }



[WebMethod]
    public static AutoCompleteBoxData GetISOCodeDescriptionsRadCombobox(object context)
    {
        string searchString = ((Dictionary<string, object>)context)["Text"].ToString();
        DataTable data = GetData(searchString, 1);
        List<AutoCompleteBoxItemData> result = new List<AutoCompleteBoxItemData>();

        foreach (DataRow row in data.Rows)
        {
            AutoCompleteBoxItemData childNode = new AutoCompleteBoxItemData();
            childNode.Text = row["CodeDesc"].ToString();
            childNode.Value = row["CodeDesc"].ToString();
            result.Add(childNode);
        }
        AutoCompleteBoxData res = new AutoCompleteBoxData();
        res.Items = result.ToArray();
        return res;
    }


    private static DataTable GetData(string text, int Value)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["QMSDBCON"]);
        DataSet ds = SqlHelper.ExecuteDataset(con, "usp_GetIsoCode", text, Value);
        DataTable data = new DataTable();
        // adapter.Fill(data);
        data = ds.Tables[0];
        return data;
    }

JavaScript调用新条目：

function addNewEntry() {
        debugger;
        var autoCompleteBoxCode = $find("<%= RdAutoClassCode.ClientID %>");
        var autoCompleteBoxDescription = $find("<%= RdAutoClassDesc.ClientID %>");
        var entriesCount = autoCompleteBoxCode.get_entries().get_count();
        var entry = new Telerik.Web.UI.AutoCompleteBoxEntry();
        autoCompleteBoxDescription.get_entries().clear();

        for (var i = 0; i < entriesCount; i++) {
            var code = autoCompleteBoxCode.get_entries().getEntry(i).get_text();
            _ClassCodeSelectedIndexChanged(code);
        }
    }

使用Json调用服务器方法

function _ClassCodeSelectedIndexChanged(code) {
        debugger;
        var URL = window.location.protocol + "//" + window.location.host;
        URL = URL + "/GetClassCodeAndDescription.aspx/GetISOCodesRadComboboxData";
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: URL,
                data: "{Code : '" + code + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    onsuccess(msg);
                },
                error: function (xhr) {
                    onerror(xhr);
                }
            });
        });
    }

使用Javascript的Telerik自动完成框textchanged事件

2 个答案: