-gMIS更新：增加input2Select功能

所谓input2Select是将当下正在操作的input输入框变成select一样的功能，也即随着用户的输入，在下方会出现类似下拉列表的备选项或者提示项。在搜索引擎中又叫做instant search.

如上图所示，在 -bing 里输入 “自然”两个字，下面会出现备选项的提示。

在 -gMIS 原本无此需求，但当某个字段的使用select输入方式时，如果选择项超过50或者100之后，用户检索、选择起来就比较困难。如下图所示。

这时如果能有个类似搜索引擎的那种先根据关键词过滤一下相关条目，然后再列出来就比较好。想到做到，经过一番分析和实验，实现如下效果：

主要逻辑：

1. 将原来的select使用css修饰为 style.display=’none’, 设置为隐藏；

2. 增加输入框，在输入框的附近设置一个隐藏的用于显示搜索结果的隐藏div；

3. 在输入框上绑定onkeyup动作，用户每有输入即进行检索：1）可以在本地检索隐藏的select里的options，也可以即时联网从服务器上获取检索结果（像通用搜索一样）。

下面的代码中使用的是第一种方式。

涉及到的程序：

function input2Select(inputx,obj){
var lastSearchTime = userinfo.lastInput2SearchTime;
var nowTime = (new Date()).getTime();
var balaTime = nowTime – lastSearchTime;
var inputVal = inputx.value;
var obj1737 = document.getElementById(‘pnsk_’+obj+’_sele_div’);
if(inputVal.length < 2 || balaTime < 1000){
console.log(‘input-length:’+inputVal.length+’, balaTime:’+balaTime);
//obj1737.innerHTML = ”;
return 0;
}
else{
var iInputX = inputx.value.toLowerCase();
var hidesele = document.getElementById(‘pnsk_’+obj+”);
var odata = “”;
var dataarr = []; var j = 0;
if(hidesele != null){
for(var i=0; i < hidesele.length; i++){ //- 复制搜索栏里的select选项到当前
var seleText = hidesele.options[i].text;
if(seleText.toLowerCase().indexOf(iInputX) > -1){
//–
dataarr[j++] = ‘<span onmouseover=parent.changeBGC(this,1); onmouseout=parent.changeBGC(this,0); onclick=parent.makeSelect(\’in
put2sele_’+obj+’\’,this.innerText,\’pnsk_’+obj+’_sele_div\’,\’pnsk_’+obj+’\’);>’+seleText+'</span>’;
if(j>30){
dataarr[j++] = ‘更多…..’;
break;
}
}
}
}
if(dataarr.length == 0){
dataarr[0] = “……Oops! 没有找到/Not Found….”;
}
odata = dataarr.join(‘<br/>’);
//console.log(odata);
obj1737.innerHTML = odata;
userinfo.lastInput2SearchTime = (new Date()).getTime();
}
}

在自己实现上述功能之前，找了网上一些类似的功能代码，都感觉不够简洁。自己写起来相对还不算太难。