简单表格建议

最新推荐文章于 2024-05-02 21:49:27 发布

cxygs5788

最新推荐文章于 2024-05-02 21:49:27 发布

阅读量144

点赞数

文章标签： xhtml javascript ViewUI

目的：允许您为文本表单输入创建“预设”。 “重量轻且易于设置，它为〜1kb的代码增加了很多便利。”

只有一个功能，两个参数：

第一个参数是要升级的元素。

您可以指定输入的名称，ID或输入本身。您还可以传递包含上述任意项的数组，以轻松地将多个字段绑定到相同的建议。

第二个论点是一系列建议。

它是文本或数字的简单数组，将显示为建议。

这个注释过的示例已经在ie6 + 7，ff3，safariWin，opera9和chrome中进行了测试。

观看现场演示

这里

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>form suggestions demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="boot()">
<h1>View Settings</h1>    
<form>
    Width    <input name='width' />    <br />
    Height    <input name='height' />    <br />
    Size        <input name='fontSize' />    <br />
    Color        <input name='color' />    <br />
            <input type='submit' />
</form>     
<script type='text/javascript'> 
if (!Array.prototype.map) { //  for IE compatibility...
    Array.prototype.map=function(fun){
    var L=this.length;var res=new Array(L);var thisp=arguments[1];
    for(var i=0;i<L;i++){if(i in this){res[i]=fun.call(thisp,this[i],i,this);}}
    return res;};
}  
function bindSuggest(elm, ray) { 
// first define a couple handy private inner functions:
    function show2(s){if(s.split){s=el(s);}if(!s){return;}s.style.display="inline";}
    function hide(s){if(s.split){s=el(s);}if(!s){return;}s.style.display="none";} 
// start processing the arguments:
    if (elm.join) { //handle arrays of tags/ids/names args
      return elm.map(function (a) {bindSuggest(a, ray);});
    }
    if (elm.charAt) { //handle id/names args
      elm = document.getElementById(elm) || 
               document.getElementsByName(elm)[0] ;
    }  
// if we can't find the input, we bail:
    if(!elm){return 0;} 
// create a new suggestion combo:
    var s =document.createElement("select");
    ray.map(function (a) {
       var o=new Option(a); o.innerText=a; s.appendChild(o);
    }); 
// a little style goes a long way:
    var ss = s.style;
    ss.display = "none"; ss.width="5em"; ss.padding="0.9em;" 
    ss.textAlign="center"; ss.zIndex=555555;  ss.borderWidth="0px"; 
// bind the input's events:
    elm.onfocus= function () { show2(s);}
    elm.onblur= function () {  s.tim = setTimeout(function(){ hide(s);}, 150 ); }; 
// bind the combo's events:
    s.onfocus= function () {  clearTimeout(s.tim);};
    s.onblur= function () {  hide(s);};
    s.onchange = function () {
        elm.value = this.value;  elm.focus();
        elm.select(); hide(s);
    }; 
// tuck the combo next to the text input
    elm.parentNode.insertBefore(s, elm.nextSibling); 
  return s; // return the new combo
}// end suggestion binder   
// ###### customize the code below for your forms ###### 
// examples of how to use the function: 
function boot(){  
// bind several inputs to size presets:
    bindSuggest( ["width","fontSize","height"] ,
        [5,10,12,14,16,20,24,32,50,64,72,100,120,150,200] 
    ); 
// bind just the color input to some colors:
    bindSuggest( "color", "black,white,red,blue,green,gray".split(",") ) 
}//end boot
</script>
</body>
</html>

这是一个压缩版本，可放入您自己的脚本中：


function bindSuggest(elm,ray){
if (!Array.prototype.map) {Array.prototype.map=function(fun){
var L=this.length;var res=new Array(L);var thisp=arguments[1];
for(var i=0;i<L;i++){if(i in this){res[i]=fun.call(thisp,this[i],i,this);}}
return res;};};
function show2(s){if(s.split){s=el(s);}if(!s){return;}s.style.display="inline";};
function hide(s){if(s.split){s=el(s);}if(!s){return;}s.style.display="none";}
if(elm.join){return elm.map(function(a){bindSuggest(a,ray);});}if(elm.charAt){elm=document.getElementById(elm)||document.getElementsByName(elm)[0];}if(!elm){return 0;}var s=document.createElement("select");ray.map(function(a){var o=new Option(a);o.innerText=a;s.appendChild(o);});var ss=s.style;ss.display="none";ss.width="5em";ss.padding="0.9em;";ss.textAlign="center";ss.zIndex=555555;ss.borderWidth="0px";elm.onfocus=function(){show2(s);};elm.onblur=function(){s.tim=setTimeout(function(){hide(s);},150);};s.onfocus=function(){clearTimeout(s.tim);};s.onblur=function(){hide(s);};s.onchange=function(){elm.value=this.value;elm.focus();elm.select();hide(s);};elm.parentNode.insertBefore(s,elm.nextSibling);return s;}

From: https://bytes.com/topic/javascript/insights/857766-simple-form-suggestions