Jquery (Code to handle keydown event and make Ajax hits with entered
text)
<script type="text/javascript">
$(document).ready(function() {
var
selectedResultCounter = 1;
$("#txtTest").keydown(function(event) {
//check
if key pressed is alphabet, a number or backspace
if
((event.keyCode > 64 && event.keyCode < 91) || (event.keyCode
> 47 && event.keyCode < 58) || (event.keyCode == 8)) { //handle alphabets, numbers and backspace
var
currentValue = ''
if
(event.keyCode == 8 && $('#txtTest').val().length
> 0) {
currentValue = $('#txtTest').val().substring(0, $('#txtTest').val().length - 1);
} else {
currentValue = $('#txtTest').val()
+ String.fromCharCode(event.keyCode);
}
selectedResultCounter = 1;
$.ajax({
type: "POST",
url: "GetData.asmx/GetData",
data: "{'startsWith':'" + currentValue + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#divPredictedResultsContainer").html(msg.d);
if (msg.d.indexOf("divPredictedResultStyle")
> -1) {
$("#divPredictedResultsContainer").addClass("roundedCorners");
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
} else
if (event.keyCode == 40) { //handle down
key
var
resultCount = $(".divPredictedResultStyle").size();
if
(selectedResultCounter == resultCount + 1) {
selectedResultCounter =
1;
$("#divPredictedResult" +
resultCount).removeClass("divPredictedResultSelected");
}
$("#divPredictedResult"
+ selectedResultCounter).addClass("divPredictedResultSelected");
$("#divPredictedResult"
+ (selectedResultCounter - 1)).removeClass("divPredictedResultSelected");
selectedResultCounter =
selectedResultCounter + 1;
} else
if (event.keyCode == 38) { //handle up
key
selectedResultCounter =
selectedResultCounter - 1;
var
resultCount = $(".divPredictedResultStyle").size();
if
(selectedResultCounter == 1) {
selectedResultCounter = resultCount + 1;
$("#divPredictedResult1").removeClass("divPredictedResultSelected");
}
$("#divPredictedResult"
+ (selectedResultCounter - 1)).addClass("divPredictedResultSelected");
$("#divPredictedResult"
+ selectedResultCounter).removeClass("divPredictedResultSelected");
} else
if (event.keyCode == 9 || event.keyCode == 13)
{ //handle
tab key and enter key
if
(event.preventDefault) { //this is to select one of the records
event.preventDefault(); //from search results
event.stopPropagation();
}
$('#txtTest').val($(".divPredictedResultSelected").html());
return
false;
} else
if (event.keyCode == 27) { //handle escape key
$(".divPredictedResults").hide(); //hide
results div, if escape key is pressed
$("#divPredictedResultsContainer").removeClass("roundedCorners");
}
});
});
script>
Points to ponder
(read these points only if u r not in hurry, else move to ASMX code block :)
- ·
Here if I would have
used keyup event in place of keydown, It wouldn’t have been possible to select
result by pressing tab or enter key as in that case, event has already been occurred
thus prevent default can’t work.
- ·
Code in red
(see above) is a known bug :( u can c it as coding exercise): This code block
handles backspace key but assumes that user will press it end of text only and
not from between. I have this problem because on keydown I don’t have final
value of textbox, I just have the keycode of key pressed, so I am forced to
assume that key pressed is at end only(I’ll update this post once I find the proper
solution).
- ·
Code in green is heart of this all, it sends request to an ASMX service
and captures response coming from there.
- ·
In code blocks that
handle up/down key there is logic to keep selecting search result records in
loop, means if down key is pressed and last result found was currently selected
then automatically selection will get changed to first search result.
ASMX Service code (To serve results from server)
< WebMethod()
> _
Public Function GetData(ByVal startsWith As
String) As String
Dim strResults As New StringBuilder(String.Empty)
Dim dtResults As DataTable =
GetDataForIntellisense(startsWith)
Dim counter As Integer = 1
strResults.Append("< div
class='divPredictedResults'>")
If dtResults.Rows.Count > 0 Then
For Each dr As DataRow In
dtResults.Rows
strResults.Append("< div
class='divPredictedResultStyle' id='divPredictedResult" + counter.ToString()
+ "'>" + dr("code").ToString() + "")
counter += 1
Next
Else
strResults.Append("No results
found.")
End If
strResults.Append("")
Return strResults.ToString()
End Function
