Hi, I want to show Suggention List with MaskedTextBox at Client Side. I have achieved this using JQuery UI Plugin by storing items in cookie and escaping underscore(_) and hyphen (-) in searching. Below is the code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadMaskedTextBox ID="TextBox1" CssClass="txtNIN" runat="server" Mask="######-####"></telerik:RadMaskedTextBox>
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="asd" Text="submit" OnClientClick="add()" />
</td>
</tr>
</table>
</div>
<%-- <div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags"/>
</div>--%>
</form>
</body>
</html>
<script type="text/javascript">
var arr = [];
$(function () {
var myCookie = getCookie("SSNKey");
if (myCookie == null || myCookie == "") {
arr = [];
var json_str = JSON.stringify(arr);
createCookie('SSNKey', json_str);
}
else {
var json_str = getCookie('SSNKey');
arr = JSON.parse(json_str);
}
$("#TextBox1").autocomplete({
minLength: 0,
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term.replace(/_/g, "").replace("-", "")), "i");
var matching = $.grep(arr, function (value) {
return matcher.test(value);
});
response(matching);
},
select: function (event, ui) {
event.preventDefault();
var selectedObj = ui.item;
var y = ["_", "_", "_", "_", "_", "_", "-", "_", "_", "", "_"];
for (var i = 0; i < selectedObj.value.length; i++) {
y[i] = selectedObj.value.charAt(i);
}
$find("<%= TextBox1.ClientID %>").set_value(y.toString().replace(/,/g, ""));
}
})
.focus(function () {
$(this).autocomplete("search", "");
});
});
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
function add() {
var x = document.getElementById('TextBox1').value.replace(/_/g, "").replace("-","");
if (arr.indexOf(x) == -1) {
arr.unshift(x)
if (arr.length > 5) {
arr.pop();
}
var json_str = JSON.stringify(arr);
createCookie('SSNKey', json_str);
}
}
</script>
8 Answers, 1 is accepted
Rank 1
I am afraid that there is no control in our suite that could be modified in the way that you are requesting. The only thing that I could suggest is that you bind the masked values (including the underscore and hyphen symbols) and use the RadAutoCompleteBox control.
Best Regards,
Konstantin Dikov
Telerik
Rank 1
Thanks Konstantin for your reply. you have suggested to bind masked values with RadAutoCompleteBox but It will create the following problems:
1. There will not come underscore and hyphen symbols as come in RadMaskedTextBox also shown in above attached image.
2. After enter any character in RadAutoCompleteBox the DropDownList will come with underscore and hyphen but In DropDownList there should only come values because underscore and hyphens is only for look and feel of RadMaskedTextBox.
You can combine the AutoCompleteBox with the RadMaskedTextBox, so that changing the value inside the Masked TextBox will trigger the AutoCompleteBox query. Here's some sample code that does exactly that:
<script> function pageLoad() { auto = $find("RadAutoCompleteBox1"); box = $find("TextBox1"); $telerik.$(document).on("keydown", ".riTextBox", function(e) { setTimeout(function() { auto._dropDown.clear(); auto._dropDown.close(); auto.query(box.get_value()); }, 10); }); }</script><telerik:RadMaskedTextBox runat="server" ID="TextBox1" Mask="######-####"></telerik:RadMaskedTextBox><telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1" CollapseAnimation-Type="None" ExpandAnimation-Type="None" style="height: 0px; overflow: hidden"></telerik:RadAutoCompleteBox>RadAutoCompleteBox1.DataSource = new string[] { "123124", "123123", "2131", "2343" };All you need to add to this is handle the OnClientEntryAdding event and set the value to the MaskedTextBox.
Please keep in mind that this is a rather hacky solution and we can't quarantee 100% accuracy in all scenarios.
Regards,
Bozhidar
Telerik
Rank 1
thanks Bozhidar it is really helpful code.
only one problem now i am facing is that on dropDownClosing event in javascript i am filling RadMaskedTextBox with value highlighted in dropdownlist of RadAutoCompleteBox so when click in dropdownlist then it is fine the highlighted value is filled in RadMaskedTextBox but problem is when i click outside of dropdownlist and RadMaskedTextBox then the dropdownlist is closing and filling highlighted value in RadMaskedTextBox which should not be.
Rank 1
Below is the code:
function dropDownClosing(sender, eventArgs) {
if ($telerik.$('.RadAutoCompleteBoxPopup .racItemHovered').text() != "" && box.get_value() != "" && $telerik.$('.RadAutoCompleteBoxPopup .racItemHovered').text().indexOf(box.get_value()) > -1)
{
box = $find("TextBox1");
box.set_value($telerik.$('.RadAutoCompleteBoxPopup .racItemHovered').text());
}
}
Rank 1
Rank 1
Can u post Complete Solution i have tried all but not got the solution