学习一个输入框提示列表效果

学习一个输入框提示列表效果记录下

主要要点：li列背景换行变色

.Menu2 ul{margin:0;padding:0}
.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
             border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
 change:expression(
  this.onmouseover=function(){
    this.style.background="#F2F5EF";
  },
  this.onmouseout=function(){
    this.style.background="";
  }
 )
}

主要js代码

 

<script type="text/javascript">
function showAndHid(obj,types)
{
  var Layer=window.document.getElementById()
}
  function showAndHide(obj,types){
    var Layer=window.document.getElementById(obj);
    switch(types){
  case "show":
    Layer.style.display="block";
  break;
  case "hide":
    Layer.style.display="none";
  break;
}
  }
  function getValue(obj,str){
    var input=window.document.getElementById(obj);
input.value=str;
  }
</script>

body里调用

 

<div> Location：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>
   <!--列表1-->
   <div class="Menu" id="List1">
  <div class="Menu2">
    <ul>
  <li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
  <li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
</ul>
  </div>
   </div>

全部例子代码：下载