Jquery+ajax+text text box to implement intelligent prompt full instance

Jquery+ajax+text text box to implement intelligent prompt full instance _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags prev tojson

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The example in this article describes how Jquery+ajax+text text boxes implement smart hints. Share to everyone for your reference, specific as follows:

Imitation Baidu Query Intelligent tips

First look at the effect chart:

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 by the ASP.net page used in this article):

<body>
 <form id= "Form1" runat= "Server" >
 <div>
  intelligent fuzzy query hint
  <input id= "Txt_search "Type=" text "style=" width:150px; "/> <div id=" SearchResult "style=" Display:none
  ; " >
  </div>
 </div>
 </form>
</body>

jquery Code section:

<script type= "Text/javascript" > $ (Function () {$ ("#txt_search"). KeyUp (function (evt) {changecoords (); Control Query Results div coordinates var k = window.event?
    Evt.keyCode:evt.which;  The ID of the input box is Txt_search, where the KeyUp event//is not empty && not the up or down arrow or carriage return if ($ ("#txt_search"). Val ()!= "" && K!= && k!= && k!= {$.ajax ({type: ' Post ',//async:false,//synchronous execution, otherwise there will be a problem D Atatype: "JSON", url: "Intelligenceselect.aspx/getusernamelist",//Submitted page/method name data: "{' UserName ': '" + $ ("#txt_s Earch "). Val () +" '} ",//parameter (if no parameter: null) ContentType:" Application/json;
      Charset=utf-8 ", Error:function (msg) {//Request failure handling function alert (" Data load Failed ");
       }, Success:function (data) {//Request successfully processed function.
       var objdata = eval ("+ DATA.D +"));
        if (Objdata.length > 0) {var layer = "";
        Layer = "<table id= ' AA ' >"; $.each (objdata, function (idx, item) {layer + = "<tr class="Line ' ><td class= ' std ' > ' + item.username + ' </td></tr> ';
        });
        Layer = "</table>";
        Add the result 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");
         The function () {$ (this). Removeclass ("hover");
        $ ("#searchresult"). CSS ("display", "none");
        });
         Mouse Click 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) {//Carriage return $ (' #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");
  });
  }); Set query results div coordinate function changecoords () {//var left = $ ("#txt_search") [0].offsetleft;//get distance from leftmost, pixel, integer//var to p = $ ("#txt_search") [0].offsettop + 26; Gets the distance at the top of the distance, Pixel, Integer (20 is the height of the search input box) var left = $ ("#txt_search"). Position (). Gets the distance from the leftmost end, pixel, integer var top = $ ("#txt_search"). Position (). Top + 20;; Get the top of the distanceDistance, pixel, Integer (20 is the height of the search input box) $ ("#searchresult"). CSS ("left", left + "px"); Redefine the CSS property $ ("#searchresult"). CSS ("top", Top + "px");

 Ditto} </script>

. CS Background Code:

#region [WebMethod ()] public static string Getusernamelist (String userName) {StringBuilder returnstr = new Stringbuild
  ER ();
  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 converted to JSON format///<summary>///DataTable converted to JSON format///</summary>///<param na  Me= "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

More interested readers of jquery-related content can view this site: A summary of Ajax usage in jquery, a summary of the jquery form operation tips, a summary of common plug-ins and usage in jquery, a summary of jquery operations JSON data techniques, jquery Extension Tips Summary, jquery drag-and-drop effects and tips summary, jquery table (table) Operation tips Summary, "jquery Common Classic Effects Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More