427
"Lightweight and simple to setup, it adds a lot of convenience for ~1kb of code."
Only one function, two parameters:
First argument is the element to upgrade.
you can specify the input's name, id or the input itself. you can also pass an array containing of any of these to easily bind multiple fields to the same suggestions.
Second argument is an array of suggestions.
it is a simple array of the text or numbers that will appear as suggestions.
This commented example has been tested in ie6+7,ff3,safariWin, opera9, and chrome.
see a live demo here
Expand|Select|Wrap|Line Numbers
- <!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>
here is a compressed version to tuck in your own scripts:
Expand|Select|Wrap|Line Numbers
- 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;}
