dh20156风之石的专栏

@CSDN.net @V-EC.com @INTERNET @YOUR LIFE

用户操作

[即时聊天] [发私信] [加为好友]

杜欢ID：dh20156

共42320次访问，排名2649好友24人，关注者111人
向大家学习! ^_^

dh20156的文章

原创 55 篇

翻译 1 篇

转载 2 篇

评论 78 篇

dh20156风之石的公告

昵称： 风之石
位置： 中国，广东

最近评论

菜鸟：怎样获取选择的是那个值，怎样写

zj：如果text值和Value值是不相同例如 1 产品1 2 产品2 这样的话在文本框中显示的是1，2 而不是我选择的产品，还有就是我怎么知道它选择的是那个值呢？

我是个菜鸟还望高手帮我

shizhusz110：请问大哥怎么控制控件位置

jsgswjtu：D哥，能否提供思路：在已有的基础上，按拼音首字母匹配？（拼音首字母可以事先定义在数组中）

dh20156：呵呵 ^_^

文章分类

收藏

相册

岁月无声

学习资源

dh20156风之石的专栏

风之石的MSN SPACE

友情链接

dh20156风之石的家乡博客 (RSS)

威驰软件、威驰社区、威驰网店的官方站点，http://www.v-ec.com/

存档

订阅我的博客

可输入、自动匹配的下拉框收藏

新一篇: 发现POPUP中的一点问题 | 旧一篇: 风之石的Web ListView (DataGrid)

最近做一B/S项目，客户习惯了速达里边的COMBOBOX控件的使用，输入产品编号然后自动提示匹配产品信息，为了实现这个功能想了很多办法，原本在无技可施的时候准备用ActiveX控件凑合一下算了，好在JK兄出手相助，给偶一个类似的参考，终于了解了实现的方法，不过由于那套方案无法应对一些控件的遮挡，所以还不能完全达到要求，于是偶用POPUP方法改了下，终于大功告成，可以很好的实现客户的要求了，现将源公开给大家一起讨论，由于偶JS功力不深，SO，该代码还有很大的优化空间，欢迎大家讨论指正！

Thanks for JK!

STYLE.CSS

.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;z-index:99;cursor:default;overflow:hidden;-moz-box-sizing:border-box;height:expression((this.scrollHeight>130)?"130px":"auto")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:default;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:default;}

MAIN.JS

function combobox(sobj,al_v,al_t)
{

var rmopo = window.createPopup();

function rm(i,oct,h)
{
var i2=eval(i);
var oct=eval(oct);
var w=eval(i).offsetWidth;
var h=eval(h);
var lefter = i2.offsetLeft-1; var topper = i2.offsetHeight;
rmopo.document.body.innerHTML = oct.innerHTML;
rmopo.document.body.style.border="1px solid #3162A6";
rmopo.document.body.style.background="#F6F6F6";
rmopo.show(lefter, topper, w, h, i2);
}

loadcombobox(sobj,al_v,al_t);

function loadcombobox(obj,al_v,al_t)
{
var obj = eval(obj)
theListArrayV = al_v;
theListArrayT = al_t;

var tempStr='<DIV id="'+obj.id+'showcombox" style="position:relative;visibility:hidden">'
+'<DIV class="ac_menu" id="'+obj.id+'ListDiv" style="FONT-SIZE: 12px; Z-INDEX: 10; POSITION: absolute;OVERFLOW-Y:auto; WIDTH:expression('+obj.offsetWidth+'-1);">'
for(var i=0;i<theListArrayV.length;i++)
tempStr+='<DIV class="ac_menuitem" onmouseover="this.style.backgroundColor=\'#D6DEEC\';" onmouseout="this.style.backgroundColor=\'\';" onclick="this.selectedflag=1;parent.document.all.'+obj.id+'.value=this.value;parent.document.all.'+obj.id+'.blur();" style="cursor:default;" value="'+htmlEncode(theListArrayV[i])+'" textvalue="'+htmlEncode(theListArrayT[i])+'">'+htmlEncode(theListArrayT[i])+'</DIV>';
tempStr+='</DIV></DIV>';

obj.insertAdjacentHTML("afterEnd",tempStr);
obj.onfocus=AC_OnFocus;
obj.onclick=AC_OnFocus;
obj.onblur=AC_OnBlur;
obj.onkeydown=AC_OnKeyDown;
obj.autoComplete="off";
obj.onpropertychange=AC_OnPropertyChange;
}

function AC_OnFocus(obj)
{
if(obj==null) obj=event.srcElement;
popmenu=eval(obj.id+"showcombox");
rm(obj,popmenu,130);
AC_OnPropertyChange(obj);
}

function AC_OnBlur(obj)
{
rmopo.hide();
}

function AC_OnPropertyChange(obj)
{
if(obj==null) obj=event.srcElement;

var dv = eval("rmopo.document.all['"+obj.id+"ListDiv']");
theListDiv = dv
if(theListDiv==null) return ;
var theListDivChildren=theListDiv.children;

theListDiv.selectedIndex=-1;
var theFirstVisibleIndex=-1;

var objValue=obj.value;

for(var i=0;i<theListDivChildren.length;i++)
{
   if(theListDiv.children[i].textvalue.indexOf(objValue)==0)
   {
    if(theFirstVisibleIndex==-1) theFirstVisibleIndex=i;
    theListDivChildren[i].style.backgroundColor="#F6F6F6";
    theListDivChildren[i].style.display="";
   }
   else
    theListDivChildren[i].style.display="none";
   if(theListDiv.selectedIndex==-1 && theListDiv.children[i].textvalue==objValue)
   {
    theListDiv.selectedIndex=i;
   }
}
if(theListDiv.selectedIndex==-1 && theFirstVisibleIndex!=-1)
{
   theListDiv.selectedIndex=theFirstVisibleIndex;
}
if(theListDiv.selectedIndex!=-1)
{
   theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#D6DEEC";
}
adjustListDivScroll(obj);
}

function AC_OnKeyDown(obj)
{
if(obj==null) obj=event.srcElement;

var AC_TAB = 9;
var AC_ENTER = 13;
var AC_UP_ARROW = 38;
var AC_DOWN_ARROW = 40;

var dv = eval("rmopo.document.all['"+obj.id+"ListDiv']");
theListDiv = dv
if(theListDiv==null) return ;

var keyCode=event.keyCode;
if(keyCode==AC_ENTER) keyCode=event.keyCode=AC_TAB;

if(keyCode==AC_TAB && theListDiv.selectedIndex!=-1)
{
   obj.value=theListDiv.children[theListDiv.selectedIndex].value;
   rmopo.hide() ;
}

if(keyCode==AC_UP_ARROW && theListDiv.selectedIndex!=-1)
{
   for(var i=theListDiv.selectedIndex-1;i>-1;i--)
   {
    if(theListDiv.children[i].style.display!="none")
    {
     theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#F6F6F6";
     theListDiv.selectedIndex=i;
     theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#D6DEEC";
     adjustListDivScroll(obj);
     break;
    }
   }
}

if(keyCode==AC_DOWN_ARROW && theListDiv.selectedIndex!=-1)
{
   for(var i=theListDiv.selectedIndex*1+1;i<theListDiv.children.length;i++)
   {
    if(theListDiv.children[i].style.display!="none")
    {
     theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#F6F6F6";
     theListDiv.selectedIndex=i;
     theListDiv.children[theListDiv.selectedIndex].style.backgroundColor="#D6DEEC";
     adjustListDivScroll(obj);
     break;
    }
   }
   return;
}

}

function adjustListDivScroll(obj)
{
if(obj==null) obj=event.srcElement;

var dv = eval("rmopo.document.all['"+obj.id+"ListDiv']");
theListDiv = dv

if ( theListDiv==null || theListDiv.selectedIndex==-1 ) return ;
var i=theListDiv.selectedIndex;
if((theListDiv.children[i].offsetTop<theListDiv.scrollTop)||(theListDiv.children[i].offsetTop>theListDiv.scrollTop+120))
theListDiv.scrollTop=theListDiv.children[i].offsetTop-85;
}

function htmlEncode(str)
{
if(str==null) return "";
str=str.replace(/</ig,"<")
str=str.replace(/>/ig,">");
str=str.replace(/"/ig,""");
return str;
}
}

COMBOBOX.HTM

<table cellpadding=4 cellspacing=0 border=0 width="100%" >
<tr>
<td >Pid A:</td>
<td style="padding-top:0px;" >
<input name="Cca" style="width:300" tabindex="1" id="ccfield">
</td>
</tr>
<tr>
<td >Pid B:</td>
<td style="padding-top:0px;" >
<input name="Ccb" style="width:300" tabindex="1" id="ttfield">
</td>
</tr>
<tr>
<td >Select:</td>
<td style="padding-top:0px;" >
<select style="width:300px;"></select>
</td>
</tr>
</table>

效果如下：

图一：

图二：

图三：

欢迎大家讨论，优化！

转载请注明出处、作者；使用优化请务必邮件通知一下，好让偶有机会向大家学习，谢谢！

发表于 @ 2005年10月16日 13:55:00|评论(loading...)|编辑

新一篇: 发现POPUP中的一点问题 | 旧一篇: 风之石的Web ListView (DataGrid)

#dh20156 发表于2005-10-16 14:02:00 IP: 211.100.21.*: <link type="text/css" rel="stylesheet" href="../../style.css">
<script language="javascript" src="../../main.js"></script>

---^-^快乐的分隔线------------------------------------------------

引用的地址大家换成自己的实际地址!

#白瑞德发表于2005-11-28 14:58:00 IP: 221.215.46.*: 但是老兄，如果我的源数据是来自数据库的话，应该怎么办呢？

#dh20156 发表于2005-11-30 16:49:00 IP: 219.132.236.*: “如果我的源数据是来自数据库的话，应该怎么办呢？”
好办，你在用一个变量保存所有的值用逗号分隔，到JS里SPLIT就可以生成数组了。或者你在服务器端直接循环生成客户端数组也是可以的，好运。

#泽西发表于2005-12-01 21:52:00 IP: 222.215.104.*: 这个是只能和输入内容的开头几个字匹配的下拉框,能不能实现对下拉框内容中的任意一个字都匹配的下拉框啊?

#dh20156 发表于2005-12-08 10:40:00 IP: 219.132.233.*: TO:泽西
你这种要求可以实现，在匹配的时候稍微更改一下。暂时没时间去改，以后更新会重新发布！

#liang 发表于2006-07-15 16:48:00 IP: 218.18.185.*: 是呀！怎么匹配下拉框中任意的字符，而不只是开头的字符呢！！

#dh20156 发表于2006-07-17 13:07:00 IP: 218.204.98.*: TO:liang
更新后的一个DEMO已可以匹配任意字符，请参见：
http://blog.csdn.net/dh20156/archive/2006/06/08/780402.aspx

#jsgswjtu 发表于2008-06-17 21:57:58 IP: 117.25.185.*: D哥，能否提供思路：在已有的基础上，按拼音首字母匹配？（拼音首字母可以事先定义在数组中）

#zj 发表于2008-08-22 09:12:04 IP: 218.108.197.*: 如果text值和Value值是不相同例如 1 产品1 2 产品2 这样的话在文本框中显示的是1，2 而不是我选择的产品，还有就是我怎么知道它选择的是那个值呢？

我是个菜鸟还望高手帮我

#菜鸟发表于2008-08-22 09:24:04 IP: 218.108.197.*: 怎样获取选择的是那个值，怎样写

发表评论

姓名：
主页：
校验码：看不清,换一张