梅花雪的 Combo box 下拉输入框 Beta 版

meizz 2003-08-13 08:54:39
鉴于近日多有人问及可输入的下拉框, 我试写了一个 Combo Box , 现发到论坛里大家帮忙测试一下, 有什么问题大家尽管提出来, 待问题基本解决之后我再将发布正式版的 Web Combo Box, 这次代码里不支持一页面多个combo box (这个功能以后我再加上), 已实现的功能有: 可输入. 可立即保存. 可智能提示用户可输入的备选项.

<body onload="comboBox()">
<form name=form1>
<select id="MeizzComboBoxID">
<option>combo box</option>
<option value="11">疏影横斜水清浅</option>
<option value="22">暗香浮动月黄昏</option>
<option value="33">梅须逊雪三分白</option>
<option value="44">雪却输梅一段香</option>
<option value="55">梅花香自苦寒来</option>
</select>
</form>













<SCRIPT LANGUAGE="JavaScript"><!--
function comboBox()
{
combox = new MeizzComboBox();
}
function MeizzComboBox()
{ //作者: meizz(梅花雪) meizz@hzcnc.com
this.object = getObjectById("MeizzComboBoxID");
this.input = document.createElement("input");
this.div = document.createElement("div");
document.body.appendChild(this.input);
document.body.appendChild(this.div);
this.SS = this.object.style;
this.IS = this.input.style;
this.DS = this.div.style;

this.IS.fontSize = this.SS.fontSize = this.DS.fontSize = "12px";
this.IS.position = this.SS.position = this.DS.position = "absolute";
this.top = getObjectTop(this.object);
this.left = getObjectLeft(this.object);
this.width = this.object.clientWidth;
this.height = this.object.clientHeight;
this.DS.border = "1px solid #000000";
this.DS.display = "none";
this.DS.color = "#000000";
this.DS.overflow = "auto";
this.DS.overflowX = "hidden";
this.DS.padding = "2 0 8 0";
this.IS.cursor = "default";
this.IS.borderRight = "0px";
this.DS.backgroundColor = "#FFFFFF";

this.IS.top = this.top;
this.DS.top = this.top + this.height;
this.IS.left = this.DS.left = this.left;
this.IS.width = this.width-18;
this.DS.width = this.width;
this.SS.clip = "rect(0 "+ this.width +" "+ this.height +" "+ this.IS.width +")";

this.inputIndex = this.object.selectedIndex;
this.input.value = this.object.options[this.object.selectedIndex].text;
this.inputValue = this.object.options[this.object.selectedIndex].value;

this.candidateValue = ""; //候选条目的选中项的 value
this.candidateText = ""; //候选条目的选中项的 text
this.candidateFocus = null; //候选项的当前焦点项
this.divIndex = -1; //候选项的当前焦点项的索引值
this.clientInput = ""; //该变量用来记录用户的输入内容
this.candidateSelect = false; //判断当前是否正在选择候选
this.candidateHeight = 118; //候选条显示的高度值

this.object.onchange = comboxSelectChange;
this.object.onclick = comboxSelectChange;
this.input.onblur = comboxInputBlur;
this.input.onkeydown = comboxInputKeyDown;
this.div.onscroll = comboxDivScrolling;
this.div.onmousedown = comboxDivScrolling;
this.div.onblur = comboxDivHidden;
} var combox;
...全文
112 89 打赏 收藏 转发到动态 举报
写回复
用AI写文章
89 条回复
切换为时间正序
请发表友善的回复…
发表回复
tuoshi 2004-02-15
  • 打赏
  • 举报
 回复
收藏！~~
tata_1980 2004-02-15
  • 打赏
  • 举报
 回复
mark
guangqin 2003-12-25
  • 打赏
  • 举报
 回复
如果放在绝对DIV区中时，输入框就看不到，只剩下选择框(ie6)
heroqxn 2003-12-25
  • 打赏
  • 举报
 回复
"点三次"问题解决了，不过删除重复项的时候出现空白不知道怎么办 :(

========================================================================

<html>
<head>
<title>可编辑列表框</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="brook_qin">
<meta name="Description" content="">
<style>
.pos { position:absolute; top:20px; left:20px; font-size:9pt;}
.pos1 { position:absolute; top:21px; left:20px; font-size:9pt;}
.cliptext { clip:rect(0 170 20 154);}
</style>
<script language="JavaScript">
<!--
function setbox(){
inputBox.value = selectBox.options[selectBox.selectedIndex].text;
}

var thread = false;
var selectedId = -1;

function inputBoxChg(){
if(thread) {
selectBox.options[selectedId].text = inputBox.value;
selectBox.options[selectedId].value = inputBox.value;
}
}

function boxFocus(){
selectBox.options[selectBox.length] = new Option(inputBox.value, inputBox.value);
selectedId = selectBox.length-1;
thread = true;
}

function boxBlur(){
thread = false;
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>
</head>

<body onload="setbox();">
<div class="pos"><input type=text style="width:156px;" id="inputBox" onpropertychange="inputBoxChg();" onblur="boxBlur();" onfocus="boxFocus();"></div>

<div class="pos1 cliptext">
<select style="width:170px;" id="selectBox" onchange="setbox();">
<option>sddsddddds</option>
</select>
</div>
</body>
</html>
heroqxn 2003-12-25
  • 打赏
  • 举报
 回复
meizz (梅花雪)又弄出一个好东西，呵呵，恭喜恭喜

看到你写的，我突然也来了兴趣，写了一个比较简单的，仅仅是实现了最基本的功能

我发现有个问题很难解决，就是当你输入新的内容后，直接去点击下拉箭头，点到第三次才显示，不知道有没有办法解决

==========================================================
<html>
<head>
<title>可编辑列表框</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="brook_qin">
<meta name="Description" content="">
<style>
.pos { position:absolute; top:20px; left:20px; font-size:9pt;}
.pos1 { position:absolute; top:21px; left:20px; font-size:9pt;}
.cliptext { clip:rect(0 170 20 154);}
</style>
<script language="JavaScript">
<!--
function setbox(){
inputBox.value = selectBox.options[selectBox.selectedIndex].text;
}

function inputBoxChg(){
var havIt = true;
for(i=0; i<selectBox.length; i++){
if(selectBox.options[i].text == inputBox.value){
havIt = false;
break;
}
}
if(havIt) {
selectBox.options[selectBox.length] = new Option(inputBox.value, inputBox.value);
selectBox.selectedIndex = selectBox.length-1;
}
}
//-->
</script>
</head>

<body onload="setbox();">
<div class="pos"><input type=text style="width:156px;" id="inputBox" onchange="inputBoxChg();"></div>

<div class="pos1 cliptext">
<select style="width:170px;" id="selectBox" onchange="setbox();">
<option>sddsddddds</option>
</select>
</div>
</body>
</html>
阿哲Zell 2003-12-19
  • 打赏
  • 举报
 回复
正式版出来没有？
Fred_Mark 2003-12-18
  • 打赏
  • 举报
 回复
收藏
MeMeFang 2003-12-18
  • 打赏
  • 举报
 回复
好 !
fzel_net 2003-12-16
  • 打赏
  • 举报
 回复
great!
qiangtian 2003-12-16
  • 打赏
  • 举报
 回复
先mark
msybox 2003-12-16
  • 打赏
  • 举报
 回复
支持，收藏
baiyaj 2003-12-16
  • 打赏
  • 举报
 回复
up
netyvon 2003-12-15
  • 打赏
  • 举报
 回复
收藏先，有空再研究（估计研究不出来，太高深了！）
DeltaCat 2003-12-15
  • 打赏
  • 举报
 回复
顶啊
jfly301 2003-12-15
  • 打赏
  • 举报
 回复
收藏先
springtime 2003-12-10
  • 打赏
  • 举报
 回复
楼主，佩服佩服
dsclub 2003-12-10
  • 打赏
  • 举报
 回复
梅大哥，我在IE6下测试很好，但是在MyIE2下就烂了，而且，连同时打开的其它页面也都不好用了……
dailindl 2003-12-09
  • 打赏
  • 举报
 回复
收藏，顶先
zhfkiller 2003-12-09
  • 打赏
  • 举报
 回复
收藏
cai_yb 2003-12-09
  • 打赏
  • 举报
 回复
mark
加载更多回复（69）
梅花雪日历控件
calendar.jsdocument.write("");document.write("");function writeIframe()...{ var strIframe = ""+ "*{font-size: 12px; font-family: 宋体}"+ ".bg{ color: "+ WebCalendar.lightColor +";...
正版四字梅花诗：小户人家 梅花诗：怒发冲冠
正版四字梅花诗：小户人家 梅花诗：怒发冲冠 为您解答（免费分享-2宵）等待您的加入！ 107为您解答！请++威=-芯 创建 Html 的时候报错
梅花雪 的 javascript 日历控件
1.date.jsdocument.writeln();document.writeln();document.writeln();document.writeln();document.writeln( );document.writeln( );document.writeln( onclick="meizzPrevM()" titl
MzTreeView(梅花雪)完全攻略
『此文系原创，转载请注明出处，谢谢！...没办法，只好硬着头皮在谷歌、百度上乱搜一通，倒不是没有成果，搜索引擎帮我找到一个命名为“dtree”的控件，使用方法简单得让我惊诧不已，顿时将寻找梅花雪的初
select下拉菜单美化
我们在进行表单设计时，可能要用到select下拉选项控件，遗憾的是，IE浏览器默认的select控件外观非常丑陋，而且不能用样式来控制，不能在选项中添加图片等信息。今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮...
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章