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

Posted 2023-02-22

【中文标题】Telerik 使用 Javascript 的自动完成框 textchanged 事件

【英文标题】：Telerik auto complete box text changed event using Java script

【发布时间】：2013-09-24 05:00:33

【问题描述】：

我的要求是我有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");
       

使用上述代码未触发文本更改事件。

请为此提供任何样本？

提前致谢， 斯里维迪亚

【问题讨论】：

为此你可能会使用 ajax 调用来进行描述？

是的..我想知道怎么打电话？

代码会更清楚，描述控件是什么？一个文本框？

在文档 .ready 上编写一个调用另一个 ajax 函数的函数。在文本框模糊时调用该函数......如果它不起作用，请尝试这个，让我知道将提供代码

描述框也是同一个rad自动完成框。当我使用代码自动完成框选择多个代码时，多个描述将自动显示在描述自动完成中，反之亦然..

【参考方案1】：

我终于找到了解决办法。

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

<telerik:RadAutoCompleteBox ID="RdAutoClassDesc" runat="server" Width="150" DropDownHeight="70"
             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);
                
            );
        );
    

【参考方案2】：

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

function ajaxFunction(code)
// Your ajax call

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