输入框输入加下拉选择功能

输入框可以手写输入，也可以在输入框被激活的时候弹出层并在层里选择相应的数据

View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>DEMO</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="js/eye/js/jquery-1.7.1.js"></script>
<SCRIPT>
  
  $(document).ready(function(){
  // Write code..   
   $("input[type=\'text\']").attr("autocomplete", "off");  
   inputMenu();
});

 function inputMenu(){
 $(".inputSubMenu>ul>li").mousedown( function () {  
         var SubMenu = $(this).parent().parent()
       var val  = $(this).attr("val");
       SubMenu.prev("input").val(val);
       SubMenu.hide();
    });
     
     $(".inputMenu>input").focus(function(){
        $(this).next("div").show(); 
    });
    $(".inputMenu>input").blur(function(){
         $(this).next("div").hide(); 
    });
     
     
    $(".inputSubMenu>ul>li").hover(function(){
        $(this).addClass(\'hover\');
    }, function(){
        $(this).removeClass(\'hover\');
    });  
    
    }
 
  </SCRIPT>
<style>
<!--
.inputMenu {
position:relative;
z-index:1;
background:#FFF;
border:0 solid #ccc;
width:150px;
}

.inputSubMenu {
position:absolute;
left:0;
top:25px;
width:200px;
overflow:hidden;
z-index:1;
background-color:#ffffff;
display:none;
}

.inputSubMenu ul {
margin:0;
padding:0;
}

.inputSubMenu ul li {
width:100%;
height:auto;
line-height:20px;
text-indent:15px;
font-size:10px;
border-bottom:1px dashed #ccc;
color:#666;
cursor:pointer;
}

.hover {
background-color:#F2F5EF;
}
 
-->
</style>
</HEAD>

<BODY>
<!--  -->
<div class="inputMenu" >
<input type="text" class="text" id="batch" name="batch"  style="width:250px;"    />
<div class="inputSubMenu">
  <ul >
    <li val="IDD B003 - $38 Upsell (1-1000 Retry)" title="IDD B003 - $38 Upsell (1-1000 Retry)" > IDD B003 - $38 Upsell (1-... </li>
    <li val="IDD B003 - $38 Upsell FL (2)" title="IDD B003 - $38 Upsell FL (2)" > IDD B003 - $38 Upsell FL ... </li>
    <li val="IDD B005 - Upsell $9 (1-1600)" title="IDD B005 - Upsell $9 (1-1600)" > IDD B005 - Upsell $9 (1-1... </li>
    <li val="IDD B005 - Upsell $9 (1601-2900)" title="IDD B005 - Upsell $9 (1601-2900)" > IDD B005 - Upsell $9 (160... </li>
    <li val="IDD B005 - Upsell $9 (2901-4418)" title="IDD B005 - Upsell $9 (2901-4418)" > IDD B005 - Upsell $9 (290... </li>
  </ul>
</div></div>
</BODY>
</HTML>

多用作已有固定数据但有时会加入新的数据时候

是输入框与下拉列表的结合