Set ASP.net TextBox to auto complete with binding Sql server Data source using Json and web methods in c#

In this article i would like to explain, how to set asp.net text box to auto complete option with binding SQL server data source.

In first step add Jquery & Css references to page head,

http://../../Scripts/JQuery/jquery-2.1.4.js
http://../../Scripts/JQuery/jquery-ui.min.js
<link href="../../Styles/Reference/jquery-ui.css" rel="stylesheet" type="text/css" />

Access the web method in code behind throw JQuery script

function pageLoad() {
$(function () {

//Set Auto complete to ItemCodeFindTextBox texbox
$("[id$=ItemCodeFindTextBox]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Pages/Home.aspx/SetAutoComplete") %>', // set url for access the web method
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
},
minLength: 1
});
});
}

Create web method in Code-Behind for access from Client Side.

Get Data suggestions from Sql Table (ItemMaster)

[WebMethod]
public static string[] SetAutoComplete(string prefix)
{
Connection connection = new Connection();
List<string> customers = new List<string>();
using (SqlConnection conn = connection.GetConnection())
{

using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = “select * from ItemMaster where ItemCode like @ItemCode + ‘%'”; //Sql query to fill the textbox auto complete suggestions
cmd.Parameters.AddWithValue(“@ItemCode”, prefix);
cmd.Connection = conn;

using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format(“{0}-{1}”, sdr[“ItemCode”], sdr[“Id”]));
}
}
conn.Close();
}
}
return customers.ToArray();
}

finally ItemCodeFindTextBox would be like this

1

Hope you learned something,

Thanks,

Udara

Advertisements

Show and Hide a Div with Drop-down List selected text using JQuery

Below i show you how to set Div show and Hide with drop-down list selected text changed condition

$(function () {
$("#DropDownList").change(function () {

var SelectedText = $("#DropDownList option:selected").text();

//if you want to set condition with selected value, you use like this,
var SelectedValue = $("#DropDownList option:selected").val();

if (SelectedText == "Show Div") {
$('#DivClientId').show();

}
else (SelectedText == "Hide Div") {
$('#DivClientId').hide();

}

});
});

Catch Asp.net / HTML form Key Strokes (Key Pressed Events) from Client side using Jquery

Below i show how to catch Asp.net / HTML form Key press events from Client Side using JQuery,

There are some key listener codes which are bind with keys, In our example i used “Enter” button key stroke, so code of “Enter” button code is “13”,

Here is the very simple code script.


$(document).keypress(function (e) {
if (e.which == 13) {

//Things what you want to do after pressing 'Enter' button
}
});

Below key listener code list

Key code
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
left win key 91
right win key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222

Hope you learned something,
Thanks,
Udara Eshan