浏览器输入

来源:互联网 发布:二维旋转变换矩阵 编辑:程序博客网 时间:2024/06/04 18:12

<html>
<head>
 <script type="text/javascript">
  var ListUtil ={};
  ListUtil.remove = function(oListbox,iIndex)
  {
   oListbox.remove(iIndex);
  };

  ListUtil.clear = function(oListbox)
  {
   for(var i=oListbox.options.length-1;i>=0;i--)
   {
    ListUtil.remove(oListbox,i);
   } 
  };

  ListUtil.add = function(oListbox,sName,sValue)
  {
   var oOption = document.createElement("option");
   oOption.appendChild(document.createTextNode(sName));
   
   if(arguments.length ==3)
   {
    oOption.setAttribute("value",sValue);
   };
   oListbox.appendChild(oOption);
  }
 </script>
 
 <script type="text/javascript">
  var TextUtil = {};
  TextUtil.autoSuggestMatch = function(sText,arrValues)
  {
   var arrResult =[];
   if(sText != "")
   {
    for(var i=0;i<arrValues.length;i++)
    {
     if(arrValues[i].indexOf(sText) ==0)
     {
      arrResult.push(arrValues[i]);
     }
    }
   
   }
   return arrResult;
  };
   
  TextUtil.autoSuggest = function(oTextbox,arrValues,sListboxId)
  {
    var oListbox = document.getElementById(sListboxId);
    ListUtil.clear(oListbox);
    var arrMatches = TextUtil.autoSuggestMatch(oTextbox.value,arrValues);
    for(var i=0;i< arrMatches.length;i++)
    {
    ListUtil.add(oListbox,arrMatches[i]);
    } ;
   oListbox.style.visibility = "visible";
  
  } 

 </script>

 <script type="text/javascript">
  var arrColors =["red","red1","yellow","gray","white"];
  arrColors.sort();
  
  function setText(oListbox,sTextboxId)
  {
   var oTextbox = document.getElementById(sTextboxId);
   if (oListbox.selectedIndex >-1)
   {
    oTextbox.value =
    oListbox.options[oListbox.selectedIndex].text;
   };
   oListbox.style.visibility = "hidden";
  }
 
 </script> 
</head>
<body>
 <p> Type in a color in lowercase:<br/>
  <input type="text" value="" id="txtColor"
  onkeyup="TextUtil.autoSuggest(this,arrColors,'lstColors')"></input><br/>
  
  <select id="lstColors" size="5" style="width:200px;visibility:hidden;"
   onclick = "setText(this,'txtColor')"></select>
 </p>
</body>

</html>

原创粉丝点击