Rumah > Artikel > hujung hadapan web > js kotak teks input kandungan kemahiran effect_javascript pintar pintar

js kotak teks input kandungan kemahiran effect_javascript pintar pintar

WBOYasal: 2016-05-16 15:27:581738semak imbas

Contoh dalam artikel ini menerangkan kod kesan gesaan pintar untuk kandungan input kotak teks js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Idea umum:

1. Dengar acara kotak teks. Berikut ialah acara keyup yang digunakan. Anda boleh cuba menggunakan acara onchange. Tetapi saya merasakan bahawa kesan acara keyup adalah lebih baik.

2. Akses data latar belakang secara tidak segerak melalui ajax mengikut kandungan input.

3. Lintas data yang dikembalikan dan tambahkan data pada kawasan paparan.

4. Semasa menambah data, tambahkan beberapa kesan pada setiap bahagian data Klik salah satu data untuk mengisi data ke dalam kotak teks, dan kandungan segera akan hilang.

5. Data latar belakang harus disambungkan ke dalam format json.

Kod khusus adalah seperti berikut:

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

Kesan pantas pintar untuk kandungan input dalam kotak teks js sangat praktikal untuk kami memasukkan maklumat dan mencari. Saya harap artikel ini akan membantu semua orang dalam mempelajari pengaturcaraan javascript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Analisis komprehensif kemahiran kesan karusel imej Bootstrap_javascriptArtikel seterusnya：Analisis komprehensif kemahiran kesan karusel imej Bootstrap_javascript

Artikel berkaitan

Lihat lagi