SHARE
TWEET

Java

a guest Oct 31st, 2017 129 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>How to autocomplete data on multiple fields with jQuery and AJAX</title>
  5.  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.    
  8.     <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
  9.     <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
  10.     <script src="jquery-ui.min.js" type="text/javascript"></script>
  11.  
  12.     <script type="text/javascript">
  13.         $(document).ready(function(){
  14.  
  15.             $(document).on('keydown', '.username', function() {
  16.                
  17.                 var id = this.id;
  18.                 var splitid = id.split('_');
  19.                 var index = splitid[1];
  20.  
  21.                 $( '#'+id ).autocomplete({
  22.                     source: function( request, response ) {
  23.                         $.ajax({
  24.                             url: "getDetails.php",
  25.                             type: 'post',
  26.                             dataType: "json",
  27.                             data: {
  28.                                 search: request.term,request:1
  29.                             },
  30.                             success: function( data ) {
  31.                                 response( data );
  32.                             }
  33.                         });
  34.                     },
  35.                     select: function (event, ui) {
  36.                         $(this).val(ui.item.label); // display the selected text
  37.                         var userid = ui.item.value; // selected id to input
  38.  
  39.                         // AJAX
  40.                         $.ajax({
  41.                             url: 'getDetails.php',
  42.                             type: 'post',
  43.                             data: {userid:userid,request:2},
  44.                             dataType: 'json',
  45.                             success:function(response){
  46.                                
  47.                                 var len = response.length;
  48.  
  49.                                 if(len > 0){
  50.                                     var id = response[0]['id'];
  51.                                     var name = response[0]['name'];
  52.                                     var email = response[0]['email'];
  53.                                     var age = response[0]['age'];
  54.                                     var salary = response[0]['salary'];
  55.  
  56.                                     document.getElementById('name_'+index).value = name;
  57.                                     document.getElementById('age_'+index).value = age;
  58.                                     document.getElementById('email_'+index).value = email;
  59.                                     document.getElementById('salary_'+index).value = salary;
  60.                                    
  61.                                 }
  62.                                
  63.                             }
  64.                         });
  65.  
  66.                         return false;
  67.                     }
  68.                 });
  69.             });
  70.            
  71.          
  72.         });
  73.  
  74.     </script>
  75. </head>
  76. <body>
  77.     <div class="container">
  78.        
  79.         <table border='1' style='border-collapse: collapse;'>
  80.             <thead>
  81.             <tr>
  82.                 <th>Username</th>
  83.                 <th>Name</th>
  84.                 <th>Age</th>
  85.                 <th>Email</th>
  86.                 <th>Salary</th>
  87.             </tr>
  88.             </thead>
  89.            
  90.             <div class='tr_input'>
  91.                <input type='text' class='username' id='username_1' placeholder='Enter username'>
  92.                 <input type='text' class='name' id='name_1' >
  93.                <input type='text' class='age' id='age_1' >
  94.                <input type='text' class='email' id='email_1' >
  95.                <input type='text' class='salary' id='salary_1' >
  96.             </div>
  97.            
  98.         </table>
  99.         <br>
  100.         <input type='button' value='Add more' id='addmore'>
  101.     </div>
  102. </body>
  103. </html>
RAW Paste Data
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
 
Top