Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <title>How to autocomplete data on multiple fields with jQuery and AJAX</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
- <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
- <script src="jquery-ui.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(document).on('keydown', '.username', function() {
- var id = this.id;
- var splitid = id.split('_');
- var index = splitid[1];
- $( '#'+id ).autocomplete({
- source: function( request, response ) {
- $.ajax({
- url: "getDetails.php",
- type: 'post',
- dataType: "json",
- data: {
- search: request.term,request:1
- },
- success: function( data ) {
- response( data );
- }
- });
- },
- select: function (event, ui) {
- $(this).val(ui.item.label); // display the selected text
- var userid = ui.item.value; // selected id to input
- // AJAX
- $.ajax({
- url: 'getDetails.php',
- type: 'post',
- data: {userid:userid,request:2},
- dataType: 'json',
- success:function(response){
- var len = response.length;
- if(len > 0){
- var id = response[0]['id'];
- var name = response[0]['name'];
- var email = response[0]['email'];
- var age = response[0]['age'];
- var salary = response[0]['salary'];
- document.getElementById('name_'+index).value = name;
- document.getElementById('age_'+index).value = age;
- document.getElementById('email_'+index).value = email;
- document.getElementById('salary_'+index).value = salary;
- }
- }
- });
- return false;
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <div class="container">
- <table border='1' style='border-collapse: collapse;'>
- <thead>
- <tr>
- <th>Username</th>
- <th>Name</th>
- <th>Age</th>
- <th>Email</th>
- <th>Salary</th>
- </tr>
- </thead>
- <div class='tr_input'>
- <input type='text' class='username' id='username_1' placeholder='Enter username'>
- <input type='text' class='name' id='name_1' >
- <input type='text' class='age' id='age_1' >
- <input type='text' class='email' id='email_1' >
- <input type='text' class='salary' id='salary_1' >
- </div>
- </table>
- <br>
- <input type='button' value='Add more' id='addmore'>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement