javascript的select 输入匹配

公司需要能输入的select样式标签  研究了一下 总结如下

1.创建了一个js文件selectAutocomplete.js

var whichText;
 function selectStation(obj,name) {
  whichText =document.getElementById(name);
  var objSelStation = obj;
  if (obj.selectedIndex != -1) {
   var stationName = obj.options[obj.selectedIndex].text;
   whichText.value = stationName;
  }
  obj.size=1;
  //showDivStation(this, false, obj.name);//鼠标单击某一选项选定后关闭下拉框
 }

 //响应text的事件
 var pageD = 0, pageU;
 function similarFind(txtObj, seledName) {
  var curStationName = txtObj.value;
  var objSelStation = document.getElementById(seledName);//根据实际的form name修改
  var stationLength = objSelStation.options.length;
  pageU = pageD;

  //匹配用text中的数据跟下拉框中的数据
  for ( var i = 0; i < stationLength; i++) {
   var stationName = objSelStation.options[i].text;
   var re = new RegExp("^" + curStationName);
   if (stationName.match(re)) {
    if (i < stationLength - 10) {
     objSelStation.selectedIndex = i + 10;
    }
    objSelStation.selectedIndex = i;
    pageD = i;
    pageU = i;
    break;
   }
  }
  //响应下移键
  if (event.keyCode == 40) {
   pageD++;
   if (pageD == objSelStation.options.length)
    pageD = 0;
   txtObj.value = objSelStation.options[pageD].text;
   objSelStation.selectedIndex = pageD;
  }
  //响应上移键
  if (event.keyCode == 38) {
   --pageU;
   if (pageU < 0)
    pageU = objSelStation.options.length - 1;
   txtObj.value = objSelStation.options[pageU].text;
   objSelStation.selectedIndex = pageU;
  }
 }
 //下拉框显示位置
 function showDivStation(obj, b,lengnth, selName) {
  var divStation =  document.getElementById(selName);//根据实际的form name修改
  divStation.size = lengnth;
  if (b) {
   whichText = obj;
   similarFind(obj, selName);
  }
 }

 

 2.页面引用selectAutocomplete.js

    <script src="<%=basePath %>js/selectAutocomplete.js"></script>

 3.编写页面样式

     <div style="height:30px; margin-left:5px;margin-top: 6px;">
       <div
        style="position: absolute;z-index: 2;padding-top: 1px;padding-left: 1px; width: 16px;">
        <input type="text" size="70" id="put"
         style="width:130px; height: 16px;border:0"
         οnfοcus="showDivStation(this, true,${clientAllClassify_list.size()},'productClassify')"
         οnkeyup="similarFind(this,'productClassify')" value="" />
       </div>
       <div style="position: absolute;z-index: 1;">
        <select id="productClassify" style="width:150px;"
         οnchange="getPriductName(this.value);"
         οnclick="selectStation(this,'put');">
         <option value="请选择">全部</option>
         <c:forEach items="${questionClassify_list}" var="qcl"
          varStatus="i">
          <option value="${qcl[0]}">${qcl[1]}</option>
         </c:forEach>
        </select>
       </div>
      </div>