By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,657 Members | 751 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

Simple Form Suggestions

rnd me
Expert 100+
P: 427
Purpose: Allows you to create "presets" for text form inputs.

"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
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>form suggestions demo</title>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. </head>
  8. <body onload="boot()">
  9. <h1>View Settings</h1>    
  10. <form>
  11.     Width    <input name='width' />    <br />
  12.     Height    <input name='height' />    <br />
  13.     Size        <input name='fontSize' />    <br />
  14.     Color        <input name='color' />    <br />
  15.             <input type='submit' />
  16. </form>    
  17.  
  18. <script type='text/javascript'>
  19.  
  20. if (!Array.prototype.map) { //  for IE compatibility...
  21.     Array.prototype.map=function(fun){
  22.     var L=this.length;var res=new Array(L);var thisp=arguments[1];
  23.     for(var i=0;i<L;i++){if(i in this){res[i]=fun.call(thisp,this[i],i,this);}}
  24.     return res;};
  25. }
  26.  
  27.  
  28. function bindSuggest(elm, ray) {
  29.  
  30. // first define a couple handy private inner functions:
  31.     function show2(s){if(s.split){s=el(s);}if(!s){return;}s.style.display="inline";}
  32.     function hide(s){if(s.split){s=el(s);}if(!s){return;}s.style.display="none";}
  33.  
  34. // start processing the arguments:
  35.     if (elm.join) { //handle arrays of tags/ids/names args
  36.       return elm.map(function (a) {bindSuggest(a, ray);});
  37.     }
  38.     if (elm.charAt) { //handle id/names args
  39.       elm = document.getElementById(elm) || 
  40.                document.getElementsByName(elm)[0] ;
  41.     }
  42.  
  43.  
  44. // if we can't find the input, we bail:
  45.     if(!elm){return 0;}
  46.  
  47. // create a new suggestion combo:
  48.     var s =document.createElement("select");
  49.     ray.map(function (a) {
  50.        var o=new Option(a); o.innerText=a; s.appendChild(o);
  51.     });
  52.  
  53. // a little style goes a long way:
  54.     var ss = s.style;
  55.     ss.display = "none"; ss.width="5em"; ss.padding="0.9em;" 
  56.     ss.textAlign="center"; ss.zIndex=555555;  ss.borderWidth="0px";
  57.  
  58. // bind the input's events:
  59.     elm.onfocus= function () { show2(s);}
  60.     elm.onblur= function () {  s.tim = setTimeout(function(){ hide(s);}, 150 ); };
  61.  
  62. // bind the combo's events:
  63.     s.onfocus= function () {  clearTimeout(s.tim);};
  64.     s.onblur= function () {  hide(s);};
  65.     s.onchange = function () {
  66.         elm.value = this.value;  elm.focus();
  67.         elm.select(); hide(s);
  68.     };
  69.  
  70. // tuck the combo next to the text input
  71.     elm.parentNode.insertBefore(s, elm.nextSibling);
  72.  
  73.   return s; // return the new combo
  74. }// end suggestion binder
  75.  
  76.  
  77.  
  78. // ###### customize the code below for your forms ######
  79.  
  80. // examples of how to use the function:
  81.  
  82. function boot(){ 
  83.  
  84. // bind several inputs to size presets:
  85.     bindSuggest( ["width","fontSize","height"] ,
  86.         [5,10,12,14,16,20,24,32,50,64,72,100,120,150,200] 
  87.     );
  88.  
  89. // bind just the color input to some colors:
  90.     bindSuggest( "color", "black,white,red,blue,green,gray".split(",") )
  91.  
  92. }//end boot
  93. </script>
  94. </body>
  95. </html>
  96.  
  97.  



here is a compressed version to tuck in your own scripts:

Expand|Select|Wrap|Line Numbers
  1. function bindSuggest(elm,ray){
  2. if (!Array.prototype.map) {Array.prototype.map=function(fun){
  3. var L=this.length;var res=new Array(L);var thisp=arguments[1];
  4. for(var i=0;i<L;i++){if(i in this){res[i]=fun.call(thisp,this[i],i,this);}}
  5. return res;};};
  6. function show2(s){if(s.split){s=el(s);}if(!s){return;}s.style.display="inline";};
  7. function hide(s){if(s.split){s=el(s);}if(!s){return;}s.style.display="none";}
  8. 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;}
  9.  
Dec 9 '08 #1
Share this Article
Share on Google+