[forwardin]

ребята, такая проблема с json файлами не работал нужна помощь, есть условие для кнопки «ФИО», при нажатии правее этой кнопки должно создаться поле ввода, при нажатии на клавиши в котором, снизу появляется автокомплит со списком из фамилий, хранящихся в файле surnames.json в папке проекта.

<div class="row" style="padding-top:20px">
                        <div class="row-sp creatjq" style="width:80%">
                            <button id="fio">ФИО</button></div>                         
                    </div>

Скрипт на появление input

$(document).ready(function(){
	var buttoninput = $('#fio');
	buttoninput.click(function(e){
		e.preventDefault();
		var inputcreat = $('.creatjq');
		inputcreat.append('<input type ="text" class="jsonform">');
	})
});

Попытался реализовать чтение и выборку из json пока по клику на кнопку которая отображает данные в блок с классом

<div class="row">
                        <div class="form_1_button-panel">
                            <button id="send">Отправить</button>
                        </div>
                    </div>

$("#send").click(function(e) {
			e.preventDefault();
			 $.ajax({
             url:"surnames.json",
             dataType: "json",
          success:function() {
            $.getJSON('surnames.json',function (data) {
              for(var i = 0; i<data.length;i++){
                $('.form_1_button-panel').append('<tr><td>' + data.last_name + '</td><td>' + data.name +
              '</td><td>' + data.patronymic + '</td></tr>');
              }
 
            })
 
          }
        })
    });
  });

подскажите как правильно работать с json файлом и как реализовать поле ввода с автокомплитом фамилий