Text box response search code in real time

JS Code:

$ (function () {
$ ("#areaName"). KeyUp (function (evt) {
Changecoords (); Control Query Result DIV coordinates
var k = window.event? Evt.keyCode:evt.which;
The ID of the input box is areaname, which listens for the KeyUp event of the input box.
Not empty && not an up or down arrow or carriage return
if ($ ("#areaName"). val ()! = "" && k!!!!!!!!!!!!!!! = 13) {
$.ajax ({
Type: ' Post ',
Async:false,//synchronous execution, or there will be a problem
DataType: "JSON",
URL: ".. /index/area ",//page/method name submitted
Data: "{' AreaName ': '" + $ ("#areaName"). Val () + "'}",//parameters (if no parameters: null)
ContentType: "Application/json; Charset=utf-8 ",
Error:function (msg) {//Request failed handler function
Alert ("Data load Failed");
},
Success:function (data) {//Request successful post-processing function.

var objdata = data;
var layer = "";
Layer = "<table id= ' AA ' >";
$.each (objdata, function (i) {
Alert (objdata[i). AreaName);
Layer + = "<tr class= ' line ' ><td class= ' std ' >" + objdata[i] + "</td></tr>";
});
Layer + = "</table>";

Add the results to the DIV
$ ("#searchresult"). empty ();
$ ("#searchresult"). Append (layer);
$ (". Line:first"). AddClass ("hover");
$ ("#searchresult"). CSS ("Display", "");
Mouse Move Event

$ (". Line"). Hover (function () {
$ (". Line"). Removeclass ("hover");
$ (this). addclass ("hover");
}, function () {
$ (this). Removeclass ("hover");
$ ("#searchresult"). CSS ("display", "none");
});
Mouse click events
$ (". Line"). Click (function () {
$ ("#areaName"). Val ($ (this). text ());
$ ("#searchresult"). CSS ("display", "none");
});
} else {
$ ("#searchresult"). empty ();
$ ("#searchresult"). CSS ("display", "none");
//}
}
});
}
else if (k = = 38) {//Up ARROW
$ (' #aa tr.hover '). Prev (). addclass ("hover");
$ (' #aa tr.hover '). Next (). Removeclass ("hover");
$ (' #areaName '). Val ($ (' #aa tr.hover '). text ());
} else if (k = = 40) {//down arrow
$ (' #aa tr.hover '). Next (). addclass ("hover");
$ (' #aa tr.hover '). Prev (). Removeclass ("hover");
$ (' #areaName '). Val ($ (' #aa tr.hover '). text ());
}
else if (k = = 13) {//Enter
$ (' #areaName '). Val ($ (' #aa tr.hover '). text ());
$ ("#searchresult"). empty ();
$ ("#searchresult"). CSS ("display", "none");
}
else {
$ ("#searchresult"). empty ();
$ ("#searchresult"). CSS ("display", "none");
}
});
$ ("#searchresult"). Bind ("MouseLeave", function () {
$ ("#searchresult"). empty ();
$ ("#searchresult"). CSS ("display", "none");
});
});
Set query result DIV coordinates

function Changecoords () {
var left = $ ("#areaName") [0].offsetleft; Gets the distance from the leftmost end, the pixel, the integer type
var top = $ ("#areaName") [0].offsettop + 26; Get the distance from the top, pixel, Integer (20 is the height of the search input box)
var = $ ("#areaName"). Position (). Left; Gets the distance from the leftmost end, the pixel, the integer type
var top = $ ("#areaName"). Position (). Top + 20;; Get the distance from the top, pixel, Integer (20 is the height of the search input box)
$ ("#searchresult"). CSS ("left", left + "px"); Redefining CSS Properties
$ ("#searchresult"). CSS ("top", Top + "px"); Ditto
}

HTML code:

<div class= "Form-group" id= "Search" >
<input type= "text" class= "Form-control" id= "areaname" placeholder= "zone name" >
<div id= "SearchResult" style= "display:none; Background-color:white ">
</div>

</div>

Background Response code:

List<string> userlist = Userbll. Areanamelist (areaname); Condition Query List collection

Text box response search code in real time