zoukankan      html  css  js  c++  java

  • input即时————模糊匹配（纯html+jquery简单实现）

    1. <!DOCTYPE html>  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.     <script src="jquery-1.7.2.min.js"></script>  
    6.     <title></title>  
    7.   
    8.     <style type="text/css">  
    9.         #div_main {  
    10.             margin: 0 auto;  
    11.              300px;  
    12.             height: 400px;  
    13.             border: 1px solid black;  
    14.             margin-top: 50px;  
    15.         }  
    16.   
    17.         #div_txt {  
    18.             position: relative;  
    19.              200px;  
    20.             margin: 0 auto;  
    21.             margin-top: 40px;  
    22.         }  
    23.   
    24.         #txt1 {  
    25.              99%;  
    26.         }  
    27.   
    28.         #div_items {  
    29.             position: relative;  
    30.              100%;  
    31.             height: 200px;  
    32.             border: 1px solid #66afe9;  
    33.             border-top: 0px;  
    34.             overflow: auto;  
    35.             display: none;  
    36.         }  
    37.   
    38.         .div_item {  
    39.              100%;  
    40.             height: 20px;  
    41.             margin-top: 1px;  
    42.             font-size: 13px;  
    43.             line-height: 20px;  
    44.         }  
    45.     </style>  
    46. </head>  
    47. <body>  
    48.     <div id="div_main">  
    49.         <!--表单的autocomplete="off"属性设置可以阻止浏览器默认的提示框-->  
    50.         <form autocomplete="off">  
    51.             <div id="div_txt">  
    52.                 <!--要模糊匹配的文本框-->  
    53.                 <input type="text" id="txt1" />  
    54.   
    55.                 <!--模糊匹配窗口-->  
    56.                 <div id="div_items">  
    57.                     <div class="div_item">周杰伦</div>  
    58.                     <div class="div_item">周杰</div>  
    59.                     <div class="div_item">林俊杰</div>  
    60.                     <div class="div_item">林宥嘉</div>  
    61.                     <div class="div_item">林妙可</div>  
    62.                     <div class="div_item">唐嫣</div>  
    63.                     <div class="div_item">唐家三少</div>  
    64.                     <div class="div_item">唐朝盛世</div>  
    65.                     <div class="div_item">奥迪A4L</div>  
    66.                     <div class="div_item">奥迪A6L</div>  
    67.                     <div class="div_item">奥迪A8L</div>  
    68.                     <div class="div_item">奥迪R8</div>  
    69.                     <div class="div_item">宝马GT</div>  
    70.                 </div>  
    71.             </div>  
    72.         </form>  
    73.     </div>  
    74. </body>  
    75. </html>  
    76. <script type="text/javascript">  
    77.   
    78.     //弹出列表框  
    79.     $("#txt1").click(function () {  
    80.         $("#div_items").css('display', 'block');  
    81.         return false;  
    82.     });  
    83.   
    84.     //隐藏列表框  
    85.     $("body").click(function () {  
    86.         $("#div_items").css('display', 'none');  
    87.     });  
    88.   
    89.     //移入移出效果  
    90.     $(".div_item").hover(function () {  
    91.         $(this).css('background-color', '#1C86EE').css('color', 'white');  
    92.     }, function () {  
    93.         $(this).css('background-color', 'white').css('color', 'black');  
    94.     });  
    95.   
    96.     //文本框输入  
    97.     $("#txt1").keyup(function () {  
    98.         $("#div_items").css('display', 'block');//只要输入就显示列表框  
    99.   
    100.         if ($("#txt1").val().length <= 0) {  
    101.             $(".div_item").css('display', 'block');//如果什么都没填，跳出，保持全部显示状态  
    102.             return;  
    103.         }  
    104.   
    105.         $(".div_item").css('display', 'none');//如果填了，先将所有的选项隐藏  
    106.   
    107.         for (var i = 0; i < $(".div_item").length; i++) {  
    108.             //模糊匹配，将所有匹配项显示  
    109.             if ($(".div_item").eq(i).text().substr(0, $("#txt1").val().length) == $("#txt1").val()) {  
    110.                 $(".div_item").eq(i).css('display', 'block');  
    111.             }  
    112.         }  
    113.     });  
    114.   
    115.     //项点击  
    116.     $(".div_item").click(function () {  
    117.         $("#txt1").val($(this).text());  
    118.     });  
    119.   
    120. </script> 
  • 相关阅读:
    HDU 3951 (博弈) Coin Game
    HDU 3863 (博弈) No Gambling
    HDU 3544 (不平等博弈) Alice's Game
    POJ 3225 (线段树 区间更新) Help with Intervals
    POJ 2528 (线段树 离散化) Mayor's posters
    POJ 3468 (线段树 区间增减) A Simple Problem with Integers
    HDU 1698 (线段树 区间更新) Just a Hook
    POJ (线段树) Who Gets the Most Candies?
    POJ 2828 (线段树 单点更新) Buy Tickets
    HDU 2795 (线段树 单点更新) Billboard
  • 原文地址：https://www.cnblogs.com/yzadd/p/7263246.html
Copyright © 2011-2022 走看看