js text box input content intelligent prompt effect_javascript skills-JS Tutorial-php.cn

js text box input content intelligent prompt effect_javascript skills

WBOY

Release： 2016-05-16 15:27:58

Original

1803 people have browsed it

The example in this article describes the smart prompt effect code for the input content of the js text box. Share it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

General idea:

1. Listen to text box events. Here is the keyup event used. You can try using the onchange event. But I feel that the effect of the keyup event is better.

2. Access the background data asynchronously through ajax according to the input content.

3. Traverse the returned data and add the data to the display area.

4. While adding data, add some effects to each piece of data. Click one of the data to fill the data into the text box, and the prompt content will disappear.

5. The background data should be spliced into json format.

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>自动提示</title>
 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 <script type="text/ecmascript">
  function txtchange() {
   var nnmae = $("#intxt").val();
   $.ajax({
    type: "post",
    url: "ashx/AutoNote.ashx",
    data: { name: nnmae },
    dataType: "json",
    success: function (data) {
     $("#tbcontent").html(""); //删除原有数据
     if (data != "null") {
      for (var i = 0; i < $(data).length; i++) {
       $("#tbcontent").append('<div class="item" onclick="mousedown(this)">' + data[i].name + '</div>');
      }
      $("#tbcontent").slideDown();
     }
    }
   });
  }
  //选择其中的提示内容
  function mousedown(object) {
   $("#intxt").val($(object).text());
   $("#tbcontent").fadeOut();
  }
  //文档框失去焦点，隐藏提示内容
  function lost() {
   $("#tbcontent").fadeOut();
  }
 </script>
 <style type="text/css">
  .item:hover
  {
   background-color: Gray;
   cursor:pointer;
  }
  .show
  {
   width: 200px;
   z-index: 10;
   display: block;
  }
  .hidden
  {
   width: 200px;
   z-index: 10;
   display: none;
   border:1px solid rgb(80,160,91);
   border-top:none;
  }
  table tr td
  {
   margin:none;
   padding:none;
   border:none;
  }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <div style="width: 210px; margin-left:auto; margin-right:auto">
  <table>
   <tr>
    <td>
     <input type="text" style="width: 200px;" id="intxt" onkeyup="txtchange()" onblur="lost()"/>
    </td>
   </tr>
   <tr>
    <td>
     <div id="tbcontent" class="hidden">
     </div>
    </td>
   </tr>
  </table>
 </div>
 </form>
</body>
</html>

Copy after login

The intelligent prompt effect for the input content in the js text box is very practical for us to enter information and search. I hope this article will be helpful to everyone in learning javascript programming.