js-Textfeld-Eingabeinhalt, intelligenter Eingabeaufforderungseffekt_Javascript-Fähigkeiten-js-Tutorial-php.cn

js-Textfeld-Eingabeinhalt, intelligenter Eingabeaufforderungseffekt_Javascript-Fähigkeiten

WBOY

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

Original

1772 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den Smart-Prompt-Effektcode für den Eingabeinhalt des js-Textfelds. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:

Allgemeine Idee:

1. Hören Sie sich Textfeldereignisse an. Hier wird das Keyup-Ereignis verwendet. Sie können versuchen, das onchange-Ereignis zu verwenden. Aber ich habe das Gefühl, dass die Wirkung des Keyup-Ereignisses besser ist.

2. Greifen Sie entsprechend dem Eingabeinhalt asynchron über Ajax auf die Hintergrunddaten zu.

3. Durchlaufen Sie die zurückgegebenen Daten und fügen Sie die Daten dem Anzeigebereich hinzu.

4. Fügen Sie beim Hinzufügen von Daten einige Effekte zu jedem Datenelement hinzu, um die Daten in das Textfeld einzutragen. Der Inhalt der Eingabeaufforderung wird ausgeblendet.

5. Die Hintergrunddaten sollten in das JSON-Format gespleißt werden.

Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Der intelligente Eingabeaufforderungseffekt für den Eingabeinhalt im js-Textfeld ist für uns sehr praktisch, um Informationen einzugeben und zu suchen. Ich hoffe, dass dieser Artikel für alle beim Erlernen der Javascript-Programmierung hilfreich ist.