利用javascript实现仿google文本框的有关问题
利用javascript实现仿google文本框的问题
我想仿效google文本框的功能，并在此基础上增加了嵌套选择框，实现效果如附图，但是为什么当我选择自定义输入文字后当光标离开文本框时不会出现附图3那样由原来的文本框变为选择框，代码如下：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文本框下拉提示</title><head>
<script language="javascript">
var
sel = "sel",
custom = "custom",
sDefault = "自定义";
var $ = {
// 显示自定义input
forInput : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
var iSel = oSel.options.selectedIndex;
var vSel = oSel[iSel].value;
if (vSel == sDefault) {
oSel.style.display = "none";
oCus.style.display = "";
oCus.focus();
}
},
// 显示带有自定义文本选项的select
forSel : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
oSel.style.display = "";
oCus.style.display = "none";
if (oCus.value.length == 0) {
return false;
}
for (var i = 0; i < oSel.length; i++) {
if (oSel[i].value == oCus.value) {
oSel[i].selected = true;
return false;
}
}
oSel.removeChild(oSel.lastChild); // 清除自定义选项
// 添加input的选项
var cSel = document.createElement("option");
cSel.value = oCus.value;
cSel.innerHTML = oCus.value;
cSel.selected = true;
oSel.appendChild(cSel);
// 补上自定义选项，确保该选项在末尾
cSel = document.createElement("option");
cSel.value = sDefault;
cSel.innerHTML = sDefault;
oSel.appendChild(cSel);
}
};
var intIndex=0;arrList = new Array();
arrList[intIndex++] = "GD001001";
arrList[intIndex++] = "GD001002";
arrList[intIndex++] = "GD001003";
arrList[intIndex++] = "GD001004";
arrList[intIndex++] = "GD001005";
arrList[intIndex++] = "GD001006";
arrList[intIndex++] = "GD001007";
arrList[intIndex++] = "GD001008";
arrList[intIndex++] = "GD001009";
arrList[intIndex++] = "GD0010010";
arrList[intIndex++] = "ABCDEFG";
function test() {
init();
smanPromptList(arrList,"inputer");
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
arrList.sort( function(a, b) {
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
}
);
}
function smanPromptList(arrList,objInputId){
var objouter=document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的:)
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
objInput.onfocus=checkAndShow;
function checkKeyCode(evt){
evt = evt || window.event;
var ie = (document.all)? true:false
if (ie){
var keyCode=evt.keyCode
if (keyCode==40||keyCode==38){ //下上
var isUp=false
if(keyCode==40) isUp=true ;
chageSelection(isUp)
}else if (keyCode==13){//回车
outSelection(selectedIndex);
}else{
checkAndShow(evt)
}
}else{
checkAndShow(evt)
}
divPosition(evt)
}
//高亮显示
function checkAndShow(){
var strInput = objInput.value
if (strInput!=""){
divPosition();
selectedIndex=-1;
objouter.innerHTML ="";
for (intTmp=0;intTmp<arrList.length;intTmp++){
for(i=0;i<arrList[intTmp].length;i++){
if (arrList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase()){
addOption(arrList[intTmp],strInput);
}
}
}
objouter.style.display='';
}else{
objouter.style.display='none';
}
function addOption(value,keyw){
var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>");
objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + v + "</div>"
}
}
//
function chageSelection(isUp){
if (objouter.style.display=='none'){
objouter.style.display='';
}else{
if (isUp)
selectedIndex++
else
selectedIndex--
}
var maxIndex = objouter.children.length-1;
if (selectedIndex<0){selectedIndex=0}
if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
for (intTmp=0;intTmp<=maxIndex;intTmp++){
if (intTmp==selectedIndex){
objouter.children[intTmp].className="sman_selectedStyle";
}else{
objouter.children[intTmp].className="";
}
}
}
function outSelection(Index){
objInput.value = objouter.children[Index].innerText;
objouter.style.display='none';
}
function divPosition(evt){
var left = 0;
var top = 0;
var e = objInput;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
objouter.style.top = (top + objInput.clientHeight) + 'px' ;
objouter.style.left = left + 'px' ;
objouter.style.width= objInput.clientWidth;
}
}
document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
function getAbsoluteHeight(ob){
return ob.offsetHeight
}
function getAbsoluteWidth(ob){
return ob.offsetWidth
}
function getAbsoluteLeft(ob){
var mendingLeft = ob .offsetLeft;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingLeft += ob .offsetParent.offsetLeft;
mendingOb = ob.offsetParent;
}
return mendingLeft ;
}
function getAbsoluteTop(ob){
var mendingTop = ob.offsetTop;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingTop += ob .offsetParent.offsetTop;
ob = ob .offsetParent;
}
return mendingTop ;
}
Number.prototype.NaN0 = function()
{
return isNaN(this)?0:this;
}
</script>
</head>
<body onLoad="test()">
<table width="100%" border="0" align="center">
<tr>
<td><table width="100%" border="0" align="center">
<tr>
<td align="center" valign="middle"><font color="#0000FF"> </font></td>
</tr>
</table>
<div align="center"><font size="2">输入"G"试试效果吧!</font>
</div>
<table border="1" align="center" cellspacing="1" bordercolor="#CCCCCC" id="table1" style="BORDER-COLLAPSE: collapse">
<tr bgcolor="#99CCFF">
<td bgcolor="#CCCCCC"><font class="text">1</font></td>
<td bgcolor="#FFFFFF">
<select name="sel" style="width:160px;" onchange="$.forInput()">
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="自定义">自定义</option>
</select>
<input type="text" name="custom" id="inputer" size="10" maxlength="10" style="display:none;width:160px;" onblur="$.forSel()"/>
</td>
</tr>
</table>
<br /></td>
</tr>
</table>
</body></html>
你实现这个功能，代码量也太大了， 不防试试jquery
请问你有例子吗？请给点意见，谢谢！
我想仿效google文本框的功能，并在此基础上增加了嵌套选择框，实现效果如附图，但是为什么当我选择自定义输入文字后当光标离开文本框时不会出现附图3那样由原来的文本框变为选择框，代码如下：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文本框下拉提示</title><head>
<script language="javascript">
var
sel = "sel",
custom = "custom",
sDefault = "自定义";
var $ = {
// 显示自定义input
forInput : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
var iSel = oSel.options.selectedIndex;
var vSel = oSel[iSel].value;
if (vSel == sDefault) {
oSel.style.display = "none";
oCus.style.display = "";
oCus.focus();
}
},
// 显示带有自定义文本选项的select
forSel : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
oSel.style.display = "";
oCus.style.display = "none";
if (oCus.value.length == 0) {
return false;
}
for (var i = 0; i < oSel.length; i++) {
if (oSel[i].value == oCus.value) {
oSel[i].selected = true;
return false;
}
}
oSel.removeChild(oSel.lastChild); // 清除自定义选项
// 添加input的选项
var cSel = document.createElement("option");
cSel.value = oCus.value;
cSel.innerHTML = oCus.value;
cSel.selected = true;
oSel.appendChild(cSel);
// 补上自定义选项，确保该选项在末尾
cSel = document.createElement("option");
cSel.value = sDefault;
cSel.innerHTML = sDefault;
oSel.appendChild(cSel);
}
};
var intIndex=0;arrList = new Array();
arrList[intIndex++] = "GD001001";
arrList[intIndex++] = "GD001002";
arrList[intIndex++] = "GD001003";
arrList[intIndex++] = "GD001004";
arrList[intIndex++] = "GD001005";
arrList[intIndex++] = "GD001006";
arrList[intIndex++] = "GD001007";
arrList[intIndex++] = "GD001008";
arrList[intIndex++] = "GD001009";
arrList[intIndex++] = "GD0010010";
arrList[intIndex++] = "ABCDEFG";
function test() {
init();
smanPromptList(arrList,"inputer");
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
arrList.sort( function(a, b) {
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
}
);
}
function smanPromptList(arrList,objInputId){
var objouter=document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的:)
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
objInput.onfocus=checkAndShow;
function checkKeyCode(evt){
evt = evt || window.event;
var ie = (document.all)? true:false
if (ie){
var keyCode=evt.keyCode
if (keyCode==40||keyCode==38){ //下上
var isUp=false
if(keyCode==40) isUp=true ;
chageSelection(isUp)
}else if (keyCode==13){//回车
outSelection(selectedIndex);
}else{
checkAndShow(evt)
}
}else{
checkAndShow(evt)
}
divPosition(evt)
}
//高亮显示
function checkAndShow(){
var strInput = objInput.value
if (strInput!=""){
divPosition();
selectedIndex=-1;
objouter.innerHTML ="";
for (intTmp=0;intTmp<arrList.length;intTmp++){
for(i=0;i<arrList[intTmp].length;i++){
if (arrList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase()){
addOption(arrList[intTmp],strInput);
}
}
}
objouter.style.display='';
}else{
objouter.style.display='none';
}
function addOption(value,keyw){
var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>");
objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + v + "</div>"
}
}
//
function chageSelection(isUp){
if (objouter.style.display=='none'){
objouter.style.display='';
}else{
if (isUp)
selectedIndex++
else
selectedIndex--
}
var maxIndex = objouter.children.length-1;
if (selectedIndex<0){selectedIndex=0}
if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
for (intTmp=0;intTmp<=maxIndex;intTmp++){
if (intTmp==selectedIndex){
objouter.children[intTmp].className="sman_selectedStyle";
}else{
objouter.children[intTmp].className="";
}
}
}
function outSelection(Index){
objInput.value = objouter.children[Index].innerText;
objouter.style.display='none';
}
function divPosition(evt){
var left = 0;
var top = 0;
var e = objInput;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
objouter.style.top = (top + objInput.clientHeight) + 'px' ;
objouter.style.left = left + 'px' ;
objouter.style.width= objInput.clientWidth;
}
}
document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
function getAbsoluteHeight(ob){
return ob.offsetHeight
}
function getAbsoluteWidth(ob){
return ob.offsetWidth
}
function getAbsoluteLeft(ob){
var mendingLeft = ob .offsetLeft;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingLeft += ob .offsetParent.offsetLeft;
mendingOb = ob.offsetParent;
}
return mendingLeft ;
}
function getAbsoluteTop(ob){
var mendingTop = ob.offsetTop;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingTop += ob .offsetParent.offsetTop;
ob = ob .offsetParent;
}
return mendingTop ;
}
Number.prototype.NaN0 = function()
{
return isNaN(this)?0:this;
}
</script>
</head>
<body onLoad="test()">
<table width="100%" border="0" align="center">
<tr>
<td><table width="100%" border="0" align="center">
<tr>
<td align="center" valign="middle"><font color="#0000FF"> </font></td>
</tr>
</table>
<div align="center"><font size="2">输入"G"试试效果吧!</font>
</div>
<table border="1" align="center" cellspacing="1" bordercolor="#CCCCCC" id="table1" style="BORDER-COLLAPSE: collapse">
<tr bgcolor="#99CCFF">
<td bgcolor="#CCCCCC"><font class="text">1</font></td>
<td bgcolor="#FFFFFF">
<select name="sel" style="width:160px;" onchange="$.forInput()">
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="自定义">自定义</option>
</select>
<input type="text" name="custom" id="inputer" size="10" maxlength="10" style="display:none;width:160px;" onblur="$.forSel()"/>
</td>
</tr>
</table>
<br /></td>
</tr>
</table>
</body></html>
1 楼
minzaipiao
2008-12-16
你实现这个功能，代码量也太大了，
不防试试jquery
不防试试jquery
2 楼
yuca2008
2008-12-16
minzaipiao 写道
你实现这个功能，代码量也太大了， 不防试试jquery
请问你有例子吗？请给点意见，谢谢！
3 楼
xin163
2008-12-17
晕还有jquery，晕了，直接用js就能写出来
4 楼
yuca2008
2008-12-19
除了用Extjs外还有什么方法吗？