<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath_%>">
    <title></title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="ec/css/tab.css">
    <link rel="stylesheet" type="text/css" href="ec/css/basic.css">
    <link rel="stylesheet" type="text/css" href="ec/css/css.css">
    <link rel="stylesheet" type="text/css" href="ec/jsp/carTeamInfo/teamTask/dest/autosearch.css">
    <style type="text/css">
        .car_place_buttom{
            width: 26px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            background-color: #7392A9;
            float: left;
            margin-top: 5px;
            margin-left: 5px;
            font-size: 16px;
            border: 1px solid black;
            cursor: pointer;
            font-weight: bolder;
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
        .car_place_buttom_E{
            width: 26px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            background-color: #1F6689;
            float: left;
            color:white;
            margin-top: 5px;
            margin-left: 5px;
            font-size: 16px;
            border: 1px solid black;
            cursor: pointer;
            font-weight: bolder;
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
        .car_place_buttom_N{
            width: 26px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            background-color: #B23AEE;
            float: left;
            color:white;
            margin-top: 5px;
            margin-left: 5px;
            font-size: 16px;
            border: 1px solid black;
            cursor: pointer;
            font-weight: bolder;
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
    
    </style>
    <script src="ec/jsp/carTeamInfo/teamTask/dest/jquery-1.11.2.js"></script>
    <script src="ec/jsp/carTeamInfo/teamTask/dest/autosearch.js"></script>
</head>
<script type="text/javascript">
  $(function(){
      $(".car_place_buttom").click(function(){
          $("#carno").val($("#carno").val()+$(this).html());
      }).hover(
            function () {
                $(this).css("background-color","#00ff00");
          },
          function () {
              $(this).css("background-color","#7392A9");
          }
        );
      $(".car_place_buttom_E").click(function(){
          $("#carno").val($("#carno").val()+$(this).html());
      }).hover(
                function () {
                    $(this).css("background-color","#00ff00");
              },
              function () {
                  $(this).css("background-color","#1F6689");
              }
            );
      $(".car_place_buttom_N").click(function(){
          var hv = $(this).html();
          if(hv == ""){
              var carnov = $("#carno").val();
              if(carnov.length > 0){
                  $("#carno").val(carnov.substr(0,carnov.length -1));
              }
          }else if(hv == "确  认"){
              addCarDispacherInfo();
          }else if(hv == "清  除"){
              $("#carno").val("");
          }else{
              $("#carno").val($("#carno").val()+hv);
          }
          
      }).hover(
                function () {
                    $(this).css("background-color","#00ff00");
              },
              function () {
                  $(this).css("background-color","#B23AEE");
              }
            );
       
   //模糊查询
   
    var input = $("#carno");
    var autosearch = new AutoSearch();
    autosearch.init({input:input ,autoShow:false,data:function(callback){
           $.get("/query.jsp",{carno:input.val()},function(result){
                   callback(result);
           },'json');
       }
   });
  });
  function swicthKeyboard(obj){
      var keyboardstatues = $(obj).val();
      if(keyboardstatues == "关闭键盘"){
          $(obj).val("打开键盘");
          $("#keyboard").hide();
      }else{
          $(obj).val("关闭键盘");
          $("#keyboard").show();
      }
      
  }
 
</script>
<body>
    <div  class="ectbba" style="height: auto;">
    <ul >
        <li>
           <div id="car_dispacher_info_iframe" style="width: 250px;border: 0px;float: left;overflow: hidden;">
            <input id="carno" name="carno" type="text" value=""  style="float:left;border: 1px solid blue;" onkeyup="this.value=this.value.toUpperCase();" />
        </div>
           <div style="float: left;width: 245px;">  
        <input type="button" value="关闭键盘"  onclick="swicthKeyboard(this);">
           </div>
        </li>
    </ul>
       
    </div>
    <div id="keyboard" style="width: 300px;height: 302px;background-color: #ADD8E6;position: absolute ;margin-top: 32px;margin-left: 230px;z-index: 999">
        <div style="width: 300px;height:132px;">
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>      
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        <div class="car_place_buttom"></div>
        </div>
        <div style="width: 300px;height:100px;">
        <div class="car_place_buttom_E">A</div>      
        <div class="car_place_buttom_E">B</div>      
        <div class="car_place_buttom_E">C</div>      
        <div class="car_place_buttom_E">D</div>      
        <div class="car_place_buttom_E">E</div>      
        <div class="car_place_buttom_E">F</div>      
        <div class="car_place_buttom_E">G</div>      
        <div class="car_place_buttom_E">H</div>      
        <div class="car_place_buttom_E">J</div>      
        <div class="car_place_buttom_E">K</div>      
        <div class="car_place_buttom_E">L</div>      
        <div class="car_place_buttom_E">M</div>      
        <div class="car_place_buttom_E">N</div>      
        <div class="car_place_buttom_E">O</div>      
        <div class="car_place_buttom_E">P</div>      
        <div class="car_place_buttom_E">Q</div>      
        <div class="car_place_buttom_E">R</div>      
        <div class="car_place_buttom_E">S</div>      
        <div class="car_place_buttom_E">T</div>      
        <div class="car_place_buttom_E">U</div>      
        <div class="car_place_buttom_E">V</div>      
        <div class="car_place_buttom_E">W</div>      
        <div class="car_place_buttom_E">X</div>      
        <div class="car_place_buttom_E">Y</div>      
        <div class="car_place_buttom_E">Z</div>      
         </div>
        <div style="width: 300px;height:72px;">
        <div class="car_place_buttom_N">1</div>      
        <div class="car_place_buttom_N">2</div>      
        <div class="car_place_buttom_N">3</div>      
        <div class="car_place_buttom_N">4</div>      
        <div class="car_place_buttom_N">5</div>      
        <div class="car_place_buttom_N">6</div>      
        <div class="car_place_buttom_N">7</div>      
        <div class="car_place_buttom_N">8</div>      
        <div class="car_place_buttom_N">9</div>      
        <div class="car_place_buttom_N">0</div>     
        <div class="car_place_buttom_N" style="width: 65px;margin-left: 43px;"></div>
        <div class="car_place_buttom_N" style="width: 65px;margin-left: 10px;">确  认</div>     
        <div class="car_place_buttom_N" style="width: 65px;margin-left: 10px;">清  除</div>     
         </div>
    </div>
                
</body>
<html>

 jQuery文件等都是需要引入的