• 输入框联想


    要做一个车牌号输入的输入框联想提示功能,要求比较简单,故没有利用ajax去数据库查询.

    车辆多为京津冀地区的.

    js代码如下:

    <head>

    <style type="text/css">
              .item:hover{
               background-color: Gray;
               cursor:pointer;
              }
             .hidden{
               100%;
               z-index: 10;
               display: none;
               border:1px solid rgb(80,160,91);
               border-top:none;
               z-index:5;
              }
        
        </style>

    </head>

    <script type="text/javascript">
      $(function(){
          //输入车牌号给予提示
          $("#carno").keyup(function(evt){
            //再次按键时将提示框隐藏
            $("#tbcontent").fadeOut();
              evt = (evt) ? evt : window.event
              if (evt.keyCode) {
                 var keyValue = String.fromCharCode(evt.keyCode);
                 if($("#carno").val()=="J"){//文本框的值是j
                         //alert(0)
                         $("#tbcontent").html(""); //删除提示框原有数据
                         var data = ['冀','津','京'];//常用车牌归属地
                         if (data != null) {
                   for (var i = 0; i < 3; i++) {
                     $("#tbcontent").append('<div class="item" onclick="mousedown(this)">' + data[i] + '</div>');
                   }
                   $("#tbcontent").slideDown();//提示框显示
                 }
                }
              }
          });
      });

     
       //选择其中的提示内容
      function mousedown(object) {
       $("#carno").val($(object).text());
       $("#tbcontent").fadeOut();
      }
      //文档框失去焦点,隐藏提示内容
      function lost() {
       $("#tbcontent").fadeOut();
      }
    </script>

    效果图:

        1:

      

        2:车牌号输入栏输入 "J"

          

        样式十分不美观!

          

  • 相关阅读:
    微软BI 之SSAS 系列
    微软BI 之SSIS 系列
    微软BI 之SSAS 系列
    微软BI 之SSAS 系列
    微软BI 之SSIS 系列
    微软BI 之SSRS 系列
    微软BI 之SSAS 系列
    微软BI 之SSAS 系列
    微软BI 之SSAS 系列
    微软BI 之SSRS 系列
  • 原文地址:https://www.cnblogs.com/clovem/p/5359886.html
Copyright © 2020-2023  润新知