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

车辆多为京津冀地区的.

js代码如下:

<head>

<style type="text/css">
          .item:hover{
           background-color: Gray;
           cursor:pointer;
          }
         .hidden{
           width: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"

      

 

    样式十分不美观!