javascript的select 输入匹配

最新推荐文章于 2022-04-07 16:05:00 发布

悟之思语

最新推荐文章于 2022-04-07 16:05:00 发布

阅读量2.2k

点赞数

分类专栏： JAVA编程

本文链接：https://blog.csdn.net/jbjwpzyl3611421/article/details/16965597

版权

JAVA编程专栏收录该内容

89 篇文章 0 订阅

订阅专栏

公司需要能输入的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);
  }
}