目的 ：允许您为文本表单输入创建“预设”。
“重量轻且易于设置，它为〜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
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
