Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 9th, 2012  |  syntax: None  |  size: 7.87 KB  |  hits: 15  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. autocomplete with cloned fields
  2. -- Table structure for table `employees`
  3. --
  4.  
  5. CREATE TABLE IF NOT EXISTS `employees` (
  6. `id` int(12) NOT NULL AUTO_INCREMENT,
  7. `fname` varchar(50) NOT NULL,
  8. `lname` varchar(50) NOT NULL,
  9. `wage` int(12) NOT NULL,
  10. PRIMARY KEY (`id`)
  11. ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
  12.  
  13. --
  14. -- Dumping data for table `employees`  
  15. --
  16.  
  17. INSERT INTO `employees` (`id`, `fname`, `lname`, `wage`) VALUES
  18. (1, 'John', 'Doe', 25),
  19. (2, 'Bob', 'Smith', 30);
  20.        
  21. <html>
  22. <head>
  23. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  24.  
  25. <script>
  26.                 //cloning script
  27. $("#employee input").live("keyup", function(){
  28. var id = this.id.match(/d+/);
  29. });
  30.  
  31. // The second requirement:
  32. var uniqueIds = $("#employee tr").length;
  33. $("#employee input[id^='employee_fname']").live("change", function(){
  34. var $thisRow = $(this).closest("tr"),
  35.     $clone = $thisRow.clone(true),             // Clone row
  36.     $inputs = $clone.find("input").val("");// Reset values, return all inputs
  37. uniqueIds++; //Increment ID
  38. $inputs[0].id = "employee_id" + uniqueIds;
  39. $inputs[1].id = "employee_fname" + uniqueIds;
  40. $inputs[1].id = "employee_lname" + uniqueIds;
  41. $inputs[2].id = "employee_wage" + uniqueIds;
  42. //$inputs.eq(0).focus();                     // Focus on the first text field
  43. $thisRow.after($clone);                    // Add row after current one
  44. });
  45. </script>
  46.  
  47. <script>
  48.                     //autosuggest script
  49.     function lookup(employee_fname) {
  50.         if(employee_fname.length == 0) {
  51.             // Hide the suggestion box.
  52.             $('#suggestions').hide();
  53.         } else {
  54.             $.post("test_ac.php", {queryString: ""+employee_fname+""},function(data){
  55.                 if(data.length >0) {
  56.                     $('#suggestions').show();
  57.                     $('#autoSuggestionsList').html(data);
  58.                 }
  59.             });
  60.         }
  61.     } // lookup
  62.  
  63.     function fill1(thisValue) {
  64.         $('#employee_fname').val(thisValue);
  65.         setTimeout("$('#suggestions').hide();", 200);
  66.     }  
  67.     function fill2(thisValue) {
  68.         $('#employee_id').val(thisValue);
  69.         setTimeout("$('#suggestions').hide();", 200);
  70.     }  
  71.     function fill3(thisValue) {
  72.         $('#employee_lname').val(thisValue);
  73.         setTimeout("$('#suggestions').hide();", 200);
  74.     }  
  75.     function fill4(thisValue) {
  76.         $('#employee_wage').val(thisValue);
  77.         setTimeout("$('#suggestions').hide();", 200);
  78.     }  
  79.  </script>
  80.  <style>
  81.         .suggestionsBox {
  82.         position: relative;
  83.         left: 30px;
  84.         margin-top:100px;
  85.         margin-left:-35px;
  86.         margin-right:0px;
  87.         margin-bottom:0px;
  88.         padding:0px;
  89.         width: 150px;
  90.         background-color: #212427;
  91.         -moz-border-radius: 7px;
  92.         -webkit-border-radius: 7px;
  93.         border: 2px solid #000;
  94.         color: #fff;
  95.     }
  96.  
  97.     .suggestionList {
  98.         margin: 0px;
  99.         padding: 0px;
  100.     }
  101.  
  102.     .suggestionList li {
  103.  
  104.         margin: 0px 0px 3px 0px;
  105.         padding: 3px;
  106.         cursor: pointer;
  107.     }
  108.  
  109.     .suggestionList li:hover {
  110.         background-color: #659CD8;
  111.     }
  112.     </style>
  113.  
  114.  </head>
  115.  <body>
  116.  <table>
  117.  <tr>
  118.  <td width="200">
  119.  <div class="suggestionsBox" id="suggestions" style="display: none;">
  120.                 <div class="suggestionList" id="autoSuggestionsList">
  121.                 &nbsp;
  122.                 </div>
  123.                 </div>
  124.  </td>
  125.  <td>
  126.  <table>
  127.  <tr>
  128.  <td width="120" align="left" style="width:120px;">ID</td>
  129.  <td width="120" align="left" style="width:120px;">First Name</td>
  130.  <td width="120" align="left" style="width:120px;">Last Name</td>
  131.  <td width="120" align="left" style="width:120px;">Wage</td>
  132.  </tr>
  133.  </table>
  134.  <table id="employee">
  135.  <tr>
  136.  <td align="left"><input type="text" id="employee_id"   name="employee_id"      style="width:100px; background-color:#e5e5e5;" readonly="readonly" onblur="fill2();"/></td>
  137.  <td align="left"><input type="text" id="employee_fname" name="employee_fname"  style="width:100px;" onblur="fill1();" onkeyup="lookup(this.value);"/></td>
  138.  <td align="left"><input type="text" id="employee_lname" name="employee_lname"  style="width:100px; background-color:#e5e5e5;" readonly="readonly" onBlur="fill3"/></td>
  139.   <td align="left"><input type="text" id="employee_wage"    name="employee_wage"    style="width:100px; background-color:#e5e5e5;" readonly="readonly" onblur="fill4();" /></td>
  140.  </tr>
  141.  </table>
  142.  
  143.  </td>
  144.  </tr>
  145.  </table>
  146.  
  147.  </body>
  148.  </html>
  149.        
  150. <?php
  151.  
  152.     // PHP5 Implementation - uses MySQLi.
  153.     // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
  154.     $db = new mysqli('localhost', 'root' ,'passsword', 'database');
  155.  
  156.     if(!$db) {
  157.         // Show error if we cannot connect.
  158.         echo 'ERROR: Could not connect to the database.';
  159.     } else {
  160.         // Is there a posted query string?
  161.         if(isset($_POST['queryString'])) {
  162.             $queryString = $db->real_escape_string($_POST['queryString']);
  163.  
  164.             // Is the string length greater than 0?
  165.  
  166.             if(strlen($queryString) >0) {
  167.                 // Run the query: We use LIKE '$queryString%'
  168.                 // The percentage sign is a wild-card, in my example of countries it works like this...
  169.                 // $queryString = 'Uni';
  170.                 // Returned data = 'United States, United Kindom';
  171.  
  172.                 // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
  173.                 // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10
  174.  
  175.                 $query = $db->query("SELECT fname, lname, id, wage FROM employees WHERE fname LIKE '$queryString%' LIMIT 10");
  176.                 if($query) {
  177.                     // While there are results loop through them - fetching an Object (i like PHP5 btw!).
  178.                     while ($result = $query ->fetch_object()) {
  179.                         // Format the results, im using <li> for the list, you can change it.
  180.                         // The onClick function fills the textbox with the result.
  181.  
  182.                         // YOU MUST CHANGE: $result->value to $result->your_colum
  183.                         echo '<li onClick="fill1(''.$result->fname.'');
  184.                         fill2(''.$result->id.'');
  185.                         fill3(''.$result->lname.'');
  186.                         fill4(''.$result->wage.'');
  187.                         ">'.$result->lname. ',' .$result->fname.'</li>';    
  188.  
  189.  
  190.  
  191.                         }
  192.                     } else {
  193.                     echo 'ERROR: There was a problem with the query.';
  194.                 }
  195.             } else {
  196.                 // Dont do anything.
  197.             } // There is a queryString.
  198.         } else {
  199.             echo 'There should be no direct access to this script!';
  200.         }
  201.     }
  202.  
  203.  
  204. ?>
  205.        
  206. var sourceElement;
  207.                     //autosuggest script
  208.     function lookup2(source, employee_id) {
  209.         sourceElement = source;
  210.         if(employee_id.length == 0) {
  211.             // Hide the suggestion box.
  212.             $('#suggestions2').hide();
  213.         } else {
  214.             $.post("../../autocomplete/jobadd_employee.php", {queryString: ""+employee_id+""},function(data){
  215.                 if(data.length >0) {
  216.                     $('#suggestions2').show();
  217.                     $('#autoSuggestionsList2').html(data);
  218.                 }
  219.             });
  220.         }
  221.     } // lookup
  222.  
  223.     function fill8(thisValue) {
  224.         $('#employee_id'+sourceElement.id.replace("employee_id","")).val(thisValue);
  225.         setTimeout("$('#suggestions2').hide();", 200);
  226.     }  
  227.     function fill9(thisValue) {
  228.         $('#employee_fname'+sourceElement.id.replace("employee_id","")).val(thisValue);
  229.         setTimeout("$('#suggestions2').hide();", 200);
  230.     }  
  231.     function fill10(thisValue) {
  232.         $('#employee_lname'+sourceElement.id.replace("employee_id","")).val(thisValue);
  233.         setTimeout("$('#suggestions2').hide();", 200);
  234.     }  
  235.     function fill11(thisValue) {
  236.         $('#employee_wage'+sourceElement.id.replace("employee_id","")).val(thisValue);
  237.         setTimeout("$('#suggestions2').hide();", 200);
  238.     }
create a new version of this paste RAW Paste Data