recherche

Maison >interface Web >js tutoriel >js zone de texte saisie du contenu invite intelligente compétences effect_javascript

js zone de texte saisie du contenu invite intelligente compétences effect_javascript

WBOY
WBOYoriginal
2016-05-16 15:27:581782parcourir

L'exemple de cet article décrit le code d'effet d'invite intelligente pour le contenu d'entrée de la zone de texte js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Idée générale :

1. Écoutez les événements de la zone de texte. Voici l'événement keyup utilisé. Vous pouvez essayer d'utiliser l'événement onchange. Mais je pense que l'effet de l'événement keyup est meilleur.

2. Accédez aux données d'arrière-plan de manière asynchrone via ajax en fonction du contenu d'entrée.

3. Parcourez les données renvoyées et ajoutez les données à la zone d'affichage.

4. Lors de l'ajout de données, ajoutez des effets à chaque élément de données. Cliquez sur l'une des données pour remplir les données dans la zone de texte et le contenu de l'invite disparaîtra.

5. Les données d'arrière-plan doivent être fusionnées au format json.

Le code spécifique est le suivant : 

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

L'effet d'invite intelligente pour le contenu de saisie dans la zone de texte js est très pratique pour nous pour saisir des informations et rechercher. J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation javascript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Analyse complète des compétences Bootstrap Image Carousel Effect_JavascriptArticle suivant：Analyse complète des compétences Bootstrap Image Carousel Effect_Javascript

Articles Liés

Voir plus