Как решить автозаполнение нескольких полей на основе одного поля строки, используя PHP, MySql, Ajax?

Question

Привет, я новичок в ajax и php, у меня есть два поля ввода "client_name" и "client_contact". Пока я заполняю "client_name", я хочу, чтобы "client_contact" заполнялся автоматически. Мой автоматический поиск по ключевому слову в первом поле ввода "client_name" работает хорошо. Было бы так здорово, если бы кто-нибудь мог мне помочь с этим. Заранее спасибо.

Вот мой HTML вход и javascript

 $(document).ready(function(){
        $('#clientName').keyup(function(){
            var query = $(this).val();
            if(query != '')
            {
                $.ajax({
                    url:"search.php",
                    method:"POST",
                    data:{query:query},
                    success:function(data)
                    {
                        $('#clientList').fadeIn();
                        $('#clientList').html(data);

                    }
                });
            }
            else{

                $('#clientList').fadeOut();
            }

        });
        $(document).on('click', 'li', function(){
            $('#clientName').val($(this).text());
            $('#client_contact').val($client_ontact);
            $('#clientList').fadeOut();
        });

    });

<div class="form-group">
 <label for="clientName" class="col-sm-2 control-label">Client Name</label>
 <div class="col-sm-10">
  <input type="text" class="form-control ui-autocomplete-input" id="clientName" name="clientName " placeholder="Client Name" />
   
   <div class="form-group d-flex justify-content-center " style="width:200px;">
   <div   id="clientList"></div>
 </div>
 </div>
 </div> 
                
 <div class="form-group">
   <label for="clientContact" class="col-sm-2 control-label">Client Contact</label>
   <div class="col-sm-10">
   <input type="text" class="form-control ui-autocomplete-input" id="clientContact" name="clientContact" placeholder="Contact Number" />
  </div>
 </div>