API tools faq
paste
Advertisement
Guest User

keypress event example

a guest
Dec 27th, 2011
603
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.95 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
  4. <script type="text/javascript">
  5.  
  6. var keyup_details = new Array();
  7. var threshHold = 50;
  8.  
  9. $(document).ready(function(){
  10. $('select').focus(function(e){
  11.  var elem_id = $(this).attr("id");
  12.     if(elem_id in keyup_details){
  13.     //in
  14.     }else{
  15.          keyup_details[elem_id] = new Array();
  16.     }
  17.     for(var eid in keyup_details){
  18.         keyup_details[eid]['active'] = false;
  19.     }
  20.    
  21.     keyup_details[elem_id]['active'] = true;
  22. });
  23. $('select').blur(function(e){
  24. var elem_id = $(this).attr("id");
  25.  
  26.     if(elem_id in keyup_details){
  27.     //in
  28.     }else{
  29.          keyup_details[elem_id] = new Array();
  30.     }
  31.     for(var eid in keyup_details){
  32.         keyup_details[eid]['active'] = false;
  33.     }
  34. });
  35. $(document).keypress(function(){
  36.     var elem_id = null;
  37.    
  38.     for(var e in keyup_details){
  39.         if(keyup_details[e]['active']){
  40.             elem_id = e;
  41.             break;
  42.         }
  43.     }
  44.     if(elem_id == null){
  45.     return;
  46.     }
  47.    
  48.      var time_keyUp = e.timeStamp;
  49.      if(elem_id in keyup_details){
  50.     //in
  51.     }else{
  52.          keyup_details[elem_id] = new Array();
  53.          keyup_details[elem_id]['searchFor'] = '';
  54.      }
  55.      
  56.       keyup_details[elem_id]['lastTyped'] = time_keyUp;
  57. //we've received this event before, build upon the keys already typed if the key up time is greater than threshold
  58.           if((time_keyUp - keyup_details[elem_id]['lastTyped']) < threshHold){
  59.                    keyup_details[elem_id]['searchFor'] += String.fromCharCode(e.keyCode).toLowerCase();
  60.           }else{
  61.                    keyup_details[elem_id]['searchFor'] = String.fromCharCode(e.keyCode).toLowerCase();
  62.           }
  63.  
  64.     //search for it in this element's option list
  65.           var options = $(this).find("option");
  66.           var foundSelected = false;
  67.           for(var i = 0; i < options.length; i++){
  68.              var opt = $(options[i]);
  69.              if(opt.val() != 0 && opt.text().toLowerCase().indexOf(keyup_details[elem_id]['searchFor']) == 0){
  70.                  $(this).val(opt.val()); //set selected option
  71.                  foundSelected = true;
  72.                  break;
  73.              }
  74.           }
  75.           if(!foundSelected){
  76.               keyup_details[elem_id]['searchFor'] = '';
  77.               keyup_details[elem_id]['lastTyped'] = 0;
  78.           }
  79.  
  80.      });
  81.     });
  82. </script>
  83. </head>
  84. <body>
  85. <select name="sel_id" id="sel_id">
  86.                             <option value="0">Choose a new fixer...</option>
  87.                              
  88.                                  <optgroup label="Group A">
  89.                                  
  90.                                         <option value="6366">Test User useruser</option>
  91.                                    
  92.                                  </optgroup>
  93.                            
  94.                                  <optgroup label="Group B">
  95.                                  
  96.                                         <option value="5831">First Guy</option>
  97.                                    
  98.                                         <option value="1123">Second Guy</option>
  99.                                    
  100.                                         <option value="7232">Second Second Guy</option>                                                                    
  101.                                  </optgroup>
  102.                            
  103.                         </select><select name="sel_id2" id="sel_id2">
  104.                             <option value="0">Choose a new fixer...</option>
  105.                              
  106.                                  <optgroup label="Group A">
  107.                                  
  108.                                         <option value="6366">Test User useruser</option>
  109.                                    
  110.                                  </optgroup>
  111.                            
  112.                                  <optgroup label="Group B">
  113.                                  
  114.                                         <option value="5831">First Guy</option>
  115.                                    
  116.                                         <option value="1123">Second Guy</option>
  117.                                    
  118.                                         <option value="7232">Second Second Guy</option>                                                                    
  119.                                  </optgroup>
  120.                            
  121.                         </select>
  122. </body>
  123. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!