HTML ComboBox 可编辑下拉框

Question

封装为HTC方便调用<style>
.box{ behavior:url(selectBox.htc); }
</style><select style="width:150px;" class="box">
<option>sdfsdfsdfdsfsdf</option>
<option>1111111111111</option>
<option>222222222222</option>
</select>====================================================================
参考meizz(梅花雪)的JS封装类
js的构造函数不会用，也找不到相关的资料:(
哪位朋友有？给我地址或者共享一下吧，谢谢~~~~~

Answer 1

MSDN有Jscript的参考，有类封装的描述要不就是netscape.com，呵呵。

Answer 2

先把最上边的文件保存为selectBox.htc (其实这个名无所谓，自己知道是哪个就行了)再把第二贴得源文件保存为test.htm,两个文件在同一目录下就可以了

Answer 3

To:ccton()E文比较烂，看起来有点累，嘿嘿

Answer 4

有没有那个网站专门做这些WEB组件的?

Answer 5

http://www.codeproject.com/jscript/这里不错

Answer 6

我想提一点建议就是onpropertychange的使用。如果将这个玩意用来改变事件源，极其容易引起死循环。原因是什么偶不多说。另外，这种情况下和类似的情况下，onpropertychange并不能完全正确地捕捉事件，你可以用所有相关事件的一个序列来查看，好象是隔一个捕捉一个。

Answer 7

惭愧，做出来没怎么测试过，:Ponpropertychange事件很少用，所以也没碰见过您所说的情况，能不能简单说一下重现过程？
麻烦你了只要找到Bug的根源，总会有办法解决的(废话)

Answer 8

//版本更新，呵呵
//只是对接问题，因为每台机器的滚动条宽度可能不同（我的就是13px，默认16px），
//现在应该没问题了//==============================================================================//  描述      : HTML ComboBox 可编辑下拉框
//  版本      : 0.3
//  作者      : Brook Qin([email protected])
//  最新更新  : 2003-12-29
//  备注      : 在CSDN上看到梅花雪的ComboBox，也想自己做一个，这个就是了
// 因为水平比较烂，只能做到这样了。
// 更新   : 通过脚本获取垂直滚动条宽度(因为我的机器在桌面属性里把滚动条宽度设为13，所以
// 相同的东西在别的机器上显示对接不好，现在好了)
//<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="boxInit()" />
<PUBLIC:ATTACH EVENT="onchange" ONEVENT="setbox()" /><script language="JavaScript">
var selectBox, sSpanSelect, oSpanInput, oInput;
var thread     = 0;
var selectedId = -1;function boxInit(){
var oLeft, oTop, oWidth, scrollBarWidth;
oLeft  = element.offsetLeft;
oTop   = element.offsetTop;
oWidth = element.offsetWidth;//获取滚动条宽度
scrollBarWidth = element.document.body.offsetWidth - element.document.body.scrollWidth-3;//创建对象
selectBox   = element;
oSpanSelect = element.document.createElement("span");
oSpanInput  = element.document.createElement("span");
oInput      = element.document.createElement("input");
var oBlank  = element.document.createElement("span");    //这个是占位符oSpanSelect.style.cssText = "position:absolute; top:"+oTop+"px; left:"+oLeft+"px; width:"+oWidth+"px; font-size:9pt;clip:rect(0 "+oWidth+" 20 "+(oWidth-scrollBarWidth-2)+");";
oSpanInput.style.cssText  = "position:absolute; top:"+(oTop-1)+"px; left:"+oLeft+"px;";
oInput.style.cssText      = "width:"+(oWidth-scrollBarWidth)+"px; font-size:9pt;";
oBlank.style.cssText      = "width:"+oWidth+"px; height:20px;";selectBox.insertAdjacentElement("beforeBegin",oBlank);
element.document.body.appendChild(oSpanSelect);
oSpanSelect.appendChild(selectBox);
element.document.body.appendChild(oSpanInput);
oSpanInput.appendChild(oInput);//添加行为
oInput.attachEvent("onpropertychange", inputBoxChg);
oInput.attachEvent("onblur", boxBlur);
oInput.attachEvent("onfocus", boxFocus);setbox();
}function setbox(){
oInput.value = selectBox.options[selectBox.selectedIndex].text;
if(event.srcElement.tagName == "SELECT") oInput.select();
}function inputBoxChg(){
if(thread == 1){
selectBox.options[selectBox.length] = new Option(oInput.value, oInput.value);
selectedId = selectBox.length-1;
thread = 2;
selectBox.options[selectedId].text  = oInput.value;
selectBox.options[selectedId].value = oInput.value;
}else if(thread == 2) {
selectBox.options[selectedId].text  = oInput.value;
selectBox.options[selectedId].value = oInput.value;
}
}function boxFocus(){
thread     = 1;
selectedId = selectBox.selectedIndex;
}function boxBlur(){
thread = 0;
selectBox.selectedIndex = selectedId;
for(i=0; i<selectBox.length; i++){
if(selectBox.options[i].text == selectBox.options[selectedId].text && i!=selectedId){
selectBox.options[selectedId] = null;
selectBox.selectedIndex = i;
setbox();
break;
}
}
selectedId = -1;
}
</script>
</PUBLIC:COMPONENT>

Answer 9

不错，封装成htc最好了，不过css还有些没有控制好，效果不是很好

Answer 10

cloudchen(陈系上.net)别走~~~~是哪个地方？在我这里看起来完全是一个完整的select，我这里也没有几台机器可以看看效果帮忙说一下，谢谢~~~

Answer 11

我这里input的输入框高度比select小1~2个px

Answer 12

真是怪！你们用的是什么系统环境？我换了五台机器，IE5,IE6都"没问题"。
问题还是有一个：IE5下让select取得焦点，然后用鼠标滚轮快速滚几下，列表就乱套了
%^&*(()&$^%$^&%$^%  faint!~解决IE6下的一点小毛病：
=================================================================
//  描述      : HTML ComboBox 可编辑下拉框
//  版本      : 0.3
//  作者      : Brook Qin([email protected])
//  最新更新  : 2003-12-29
//  备注      : 在CSDN上看到梅花雪的ComboBox，也想自己做一个，这个就是了
// 因为水平比较烂，只能做到这样了。
// 更新   : 通过脚本获取垂直滚动条宽度(因为我的机器在桌面属性里把滚动条宽度设为13，所以
// 相同的东西在别的机器上显示对接不好，现在好了)
//<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="boxInit()" />
<PUBLIC:ATTACH EVENT="onchange" ONEVENT="setbox()" /><script language="JavaScript">
var selectBox, sSpanSelect, oSpanInput, oInput;
var thread     = 0;
var selectedId = -1;function boxInit(){
var oLeft, oTop, oWidth, scrollBarWidth;
oLeft  = element.offsetLeft;
oTop   = element.offsetTop;
oWidth = element.offsetWidth;//获取滚动条宽度
scrollBarWidth = element.document.body.offsetWidth - element.document.body.scrollWidth - 3;//创建对象
selectBox    = element;
oSpanSelect  = element.document.createElement("span");
oSpanInput   = element.document.createElement("span");
oInput       = element.document.createElement("input");
var oBlank   = element.document.createElement("span");    //这个是占位符//Style
oSpanSelect.style.cssText = "position:absolute; top:"+oTop+"px; left:"+oLeft+"px; width:"+oWidth+"px; font-size:9pt;clip:rect(0 "+oWidth+" 20 "+(oWidth-scrollBarWidth-2)+"); margin:0px;";
oSpanInput.style.cssText  = "position:absolute; top:"+(oTop-1)+"px; left:"+oLeft+"px; margin:0px;";
oInput.style.cssText      = "width:"+(oWidth-scrollBarWidth)+"px; font-size:9pt;";
oBlank.style.cssText      = "width:"+oWidth+"px; height:20px;";selectBox.insertAdjacentElement("beforeBegin",oBlank);
element.document.body.appendChild(oSpanSelect);
oSpanSelect.appendChild(selectBox);
element.document.body.appendChild(oSpanInput);
oSpanInput.appendChild(oInput);
//添加行为
oInput.attachEvent("onpropertychange", inputBoxChg);
oInput.attachEvent("onblur", boxBlur);
oInput.attachEvent("onfocus", boxFocus);setbox();
}function setbox(){
oInput.value = selectBox.options[selectBox.selectedIndex].text;
if(event.srcElement.tagName == "SELECT"){
oInput.select();
selectBox.focus();
}
}function inputBoxChg(){
if(thread == 1){
selectBox.options[selectBox.length] = new Option(oInput.value, oInput.value);
selectedId = selectBox.length-1;
thread = 2;
selectBox.options[selectedId].text  = oInput.value;
selectBox.options[selectedId].value = oInput.value;
}else if(thread == 2) {
selectBox.options[selectedId].text  = oInput.value;
selectBox.options[selectedId].value = oInput.value;
}
}function boxFocus(){
thread     = 1;
selectedId = selectBox.selectedIndex;
}function boxBlur(){
thread = 0;
selectBox.selectedIndex = selectedId;
for(i=0; i<selectBox.length; i++){
if(selectBox.options[i].text == selectBox.options[selectedId].text && i!=selectedId){
selectBox.options[selectedId] = null;
selectBox.selectedIndex = i;
setbox();
break;
}
}
selectedId = -1;
}
</script>
</PUBLIC:COMPONENT>

Answer 13

例如验证用户输入，使用onpropertychange可以比onchange更加灵敏地做出反应。但是一旦设置这个事件的事件处理器来更改用户输入的话，嘿嘿，又触发了另一次onpropertychange。如果没有仔细处理，导致更改后的条件令你的事件处理器再次修改用户输入值，你知道的啦乍看上去好象问题不大，因为事件处理器修改过的值一般来说不会导致再次修改。可是有时候，表单里不止一个输入框，你设置了好几个输入框之间的自动联动或者自动完成，问题就浮现出来了。 通常的想法是让处理器判断触发onpeopertychange的事件源，以正确地处理事件。可是正如偶前面提到的，onpropertychange在这种情况下不能正确捕获，JS会漏掉部分事件（我想这是JS的BUG）。所以你有时候可能必须综合使用onkeydown,onkeyup,onkeypress,onpropertychange等几个事件来做反应。当然，这都是界面表现强于单纯的onchange事件的，onchange事件实在是比较迟钝的事件。不过需要你更加小心，更多工夫而已。

Answer 14

还有另外一些考虑：我写过一些onpropertychange事件的小应用，比如只有表格线没有输入框的表格输入，我原来的想法是做成象word,excel那样的干净的表格，可以随着用户输入自动扩大表格（比如改换行了就多出一行空白来）以及随着用户删除文字而缩短表格。看起来没什么，往里打字的时候一切正常，正如预料的那样perfect.可是一旦copy&paste一大篇文章到这个表格里面，基本上能慢得导致IE失去反应！呵呵

Answer 15

To: ccton() 
谢谢~~~~~
IE对事件的处理确实很让人头痛，如果有几个事件同时发生的话，就麻烦了。
不过受你的提示，如果用onkeydown,onkeyup,onkeypress,onpaste,oncut等等这些应该可以模拟onchange和onpropertychange,试试再说~~To: chenlm(李逍遥) 
谢谢~~~~~
你所说的筛选是当输入东西后自动找到匹配的吗？现在就应该可以吧~

Answer 16

可以用onkeypress事件把焦点转给input.
好象方向键和tab键不会触发onkeypress，就算能触发也可以用程序排除。

Answer 17

另外，padding=0, border=0,margin=0，白底的input放在那个位置可能更好一点。线框还用原来的select的线框。——可能缩回的宽度要设为2而不是1，因为边线宽度1，3D效果的阴影也有1个宽度。这样应该可以解决对不上的问题。就是input四面都比原来select显示框的小2个pixel，直接撂在里面。感觉上这段：
if(event.srcElement.tagName == "SELECT"){
oInput.select();
selectBox.focus();
}
没啥具体作用，顶多在initial的时候执行一次，不然selectBox总是占有焦点的。似乎可以优化一下代码。偶没仔细研究，呵呵，说错了勿怪。

Answer 18

呵呵，说错了也要感谢你if(event.srcElement.tagName == "SELECT"){
oInput.select();
selectBox.focus();
}
这段确实没什么具体作用，只是为了更好的模拟select,可以支持滚轮你说的这个"直接撂在里面"倒是一个好办法！

Answer 19

不行，无论怎么样这个select 都在最上层

Answer 20

oSpanSelect.style.cssText = "position:absolute; top:"+oTop+"px; left:"+oLeft+"px; width:"+oWidth+"px; font-size:9pt;clip:rect(0 "+oWidth+" 20 "+(oWidth-19)+");";把oWidth-16改成oWidth-19看起来就不会有残缺了.

Answer 21

//获取滚动条宽度
scrollBarWidth = element.document.body.offsetWidth - element.document.body.scrollWidth - 3;这样取得滚动条的宽度比较无奈，我实在想不出别的办法，那位高手可以支招？

Answer 22

装进object里可以压住select，具体偶忘了怎么操作啦你在老帖子里面搜搜看，有示例程序的。这个法子比较好。狠一点、笨一点的办法是iframe，压不住才怪。

Answer 23

我说的筛选是指输入 某个字如 “的” 那么该筛选出option中所有包含 “的”字的项

Answer 24

恩，整个页面就算有好几个应用了你的htc的select，毕竟活动的select只有一个，你可以限制只用一个iframe实现，节省内存。对了，偶在想，你在htc里面设置的是全局变量。说实话偶没有用过htc，不知道绑定到元素以后，这种变量是否就成为了该元素的私有化变量（因为你的程序里是全程引用这些变量，这些变量必须是私有化的）。你应该在同一个页面把这个htc绑定给两个select来测试。关于Javascript的自定义类的建立，大约有下面几种相关的属性和方法/函数，你到MSDN里重点找来看看吧：(JScript参考，DHTML参考两个地方去找)
Script本身：prototype prototype允许增加新属性和方法到与现有的类的构造函数相关联的原型来给类添加方法和新属性。
例如，为String类（JS的原生类）增加一个名叫duty的方法(引用setTask函数）：///////// Example for PROTOTYPE Begins//////var myTask=new String();
function setTask(str){
   var task="Girls go shopping";
   if(str != null){
       task=str;
   }
   return task;
}String.prototype.duty=setTask; //这里为String类增加方法，方法名为duty，指向的原生函数为setTaskdocument.write("The first task is:"+mytask.duty("Nothing")+"<br>");
document.write("The first task is:"+mytask.duty());/////// Example 1 Ends //////////简单地创建一个类：
///// Example 2 Begins /////////function person(age,name){
this.name=name;
this.age=age;
}var theOne=new person(25,"Peter"); //这里，创建一个person类的实例document.write("Name is: "+theOne.name+" and age of: "+theOne.age);///// Example 2 Ends /////////========================================================希望上面的东东能帮到你。很惊讶例子2里的玩意是吧？呵呵。都不用象“class person"这样的语法来定义一个新类，function就可以了，里面的变量居然还是没有随函数的执行而消失掉哩！另外，HTML可以自定义tag，你好象可以把你的combox自定义一个为一个新tag，如何继承那些input和select的方法、属性、还有那些表观的东东，再研究嘛。看(DHTML参考）。偶还没有自定义过什么Tag呢，暂时也没有太大发言权，嘿嘿

Answer 25

to: 李逍遥就算真的combox也不是这样表现的吧？大不了从左往右匹配。 键入“b”，首字母为“b”的出现在列表内，多按一个o，成了“bo”，那么只有首两个字母为“bo”的才显示在列表框内，跟浏览器的地址栏那样。另外，新条目不能和原有条目重合，偶没注意楼主的程序考虑了没有。