Home > Developer > JavaScript
The jquery + ajax + text box provides a complete example of smart prompts, jqueryajax
This article describes how to implement smart prompts in the jquery + ajax + text box. We will share this with you for your reference. The details are as follows:
Imitating the smart prompts of Baidu queries
Let's take a look:
Code Section:
CSS code:
<style type="text/css"> #searchresult { width: 130px; position: absolute; z-index: 1; overflow: hidden; left: 130px; top: 71px; background: #E0E0E0; border-top: none; } .line { font-size: 12px; background: #E0E0E0; width: 130px; padding: 2px; } .hover { background: #007ab8; width: 130px; color: #fff; } .std { width: 150px; }</style>
Html code (written on the asp.net page in this article ):
<Body> <form id = "form1" runat = "server"> <div> smart fuzzy search prompt <input id = "txt_search" type = "text" style = "width: 150px; "/> <div id =" searchresult "style =" display: none; "> </div> </form> </body>
Jquery code:
<Script type = "text/javascript"> $ (function () {$ ("# txt_search "). keyup (function (evt) {ChangeCoords (); // controls the query result div coordinate var k = window. event? Evt. keyCode: evt. which; // the id of the input box is txt_search, listen to the keyup event in the input box // It is not blank & it is not an up or down arrow or press enter if ($ ("# txt_search "). val ()! = "" & K! = 38 & k! = 40 & k! = 13) {$. ajax ({type: 'post', // async: false, // synchronous execution. Otherwise, the dataType: "json", url: "IntelligenceSelect. aspx/GetUserNameList ", // submitted page/method name data:" {'username': '"+ $ (" # txt_search "). val () + "'}", // parameter (if no parameter is available: null) contentType: "application/json; charset = UTF-8", error: function (msg) {// request failure processing function alert ("data loading failed") ;}, success: function (data) {// post-processing function after successful request. Var objData = eval ("(" + data. d + ")"); if (objData. length> 0) {var layer = ""; layer = "<table id = 'A'>"; $. each (objData, function (idx, item) {layer + = "<tr class = 'line'> <td class = 'std '>" + item. userName + "</td> </tr>" ;}); layer + = "</table> "; // Add the result to div $ ("# searchresult "). empty (); $ ("# searchresult "). append (layer); $ (". line: first "). addClass ("hover"); $ ("# searchresult" ).css ("display", ""); // move the mouse event $ (". line "). hover (function () {$ (". line "). removeClass ("hover"); $ (this ). addClass ("hover") ;}, function () {$ (this ). removeClass ("hover"); // $ ("# searchresult" ).css ("display", "none") ;}); // click the event $ (". line "). click (function () {$ ("# txt_search "). 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"); $ ('# txt_search '). val ($ ('# aa tr. hover '). text ();} else if (k = 40) {// down arrow $ ('# aa tr. hover '). next (). addClass ("hover"); $ ('# aa tr. hover '). prev (). removeClass ("hover"); $ ('# txt_search '). val ($ ('# aa tr. hover '). text ();} else if (k = 13) {// press ENTER $ ('# txt_search '). 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") ;}); // sets the div Coordinate function ChangeCoords () of the query result () {// var left = $ ("# txt_search") [0]. offsetLeft; // obtain the distance from the leftmost end, pixel, integer // var top = $ ("# txt_search") [0]. offsetTop + 26; // get the distance from the top, pixel, INTEGER (20 is the height of the search input box) var left = $ ("# txt_search "). position (). left; // obtain the distance from the leftmost end, pixel, integer var top = $ ("# txt_search "). position (). top + 20; // obtain the distance from the top, pixel, and INTEGER (20 is the height of the search input box) $ ("# searchresult" ..css ("left ", left + "px"); // redefine the CSS attribute $ ("# searchresult" ).css ("top", top + "px"); // same as above} </script>
. Cs background code:
# Region [WebMethod ()] public static string GetUserNameList (string userName) {StringBuilder returnStr = new StringBuilder (); string strsql = "select userName from pub_user_inf where userName like '" + userName + "%' and useStatus = 1"; DataTable dt = pms. sqlHelper. executeDataTable (strsql); if (dt. rows. count> 0) {returnStr. append (ToJson (dt); return returnStr. toString () ;}else {return "";}} # endregion # region dataTable to Json format // <summary> // dataTable to Json format /// </summary> /// <param name = "dt"> </param> /// <returns> </returns> public static string ToJson (DataTable dt) {StringBuilder jsonBuilder = new StringBuilder (); jsonBuilder. append ("["); for (int I = 0; I <dt. rows. count; I ++) {jsonBuilder. append ("{"); for (int j = 0; j <dt. columns. count; j ++) {jsonBuilder. append ("\" "); jsonBuilder. append (dt. columns [j]. columnName); jsonBuilder. append ("\": \ ""); jsonBuilder. append (dt. rows [I] [j]. toString (); jsonBuilder. append ("\", ");} jsonBuilder. remove (jsonBuilder. length-1, 1); jsonBuilder. append ("},");} jsonBuilder. remove (jsonBuilder. length-1, 1); jsonBuilder. append ("]"); return jsonBuilder. toString () ;}# endregion
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
