Оптимизация функции AJAX для получения SQL данных из пользовательского ввода в раскрывающемся меню и добавления в таблицу Javascript

Question

Я создал функцию AJAX, которая получает входные данные от пользователя и возвращает совпадение из базы данных SQL в раскрывающийся список с PHP. Когда пользователь щелкает элемент в раскрывающемся списке, он заполняет поле данными SQL и заполняет еще два поля другими необходимыми данными. Затем я могу получить данные из всех ящиков и поместить их в интерактивную таблицу, используя javascript. Эта функция работает большую часть времени, но иногда переменные теряют необходимые данные, прежде чем пользователь щелкает их, чтобы добавить их в таблицу. Также кажется, что требуется некоторая оптимизация, чтобы запрос AJAX не был настолько изобретательным. Есть ли лучший способ получить данные из базы данных SQL? Может быть JSON файл?

AJAX

//Getting value from "ajax.php".
function fill(Value) {
   $('#search').val(Value);
   $('#display').hide();

}

$(document).ready(function() {
   $("#search").keyup(function() {
       var food_name = $('#search').val();
       if (food_name == "") {
           $("#display").html("");
       }
       else {
           $.ajax({
               type: "GET",
               url: "ajax.php",
               data: {
                   search: food_name
               },
               success: function(html) {
                   $("#display").html(html).show();
               }
           });
       }
   });
});

function fill2(Value2) {
   $('#search2').val(Value2);
   $('#display2').hide();
}

$(document).ready(function() {
   $("#search2").keyup(function() {
       var food_category = $('#search2').val();
       if (food_category == "") {
           $("#display2").html("");
       }
       else {
           $.ajax({
               type: "GET",
               url: "ajax.php",
               data: {
                   search: food_category
               },
               success: function(html) {
                   $("#display2").html(html).show();
               }
           });
       }
   });
});


function fill3(Value3) {
   $('#search3').val(Value3);
   $('#display3').hide();
}

$(document).ready(function() {
   $("#search3").keyup(function() {
       var food_time = $('#search3').val();
       if (food_time == "") {
           $("#display3").html("");
       }
       else {
           $.ajax({
               type: "GET",
               url: "ajax.php",
               data: {
                   search: food_time
               },
               success: function(html) {
                   $("#display3").html(html).show();
               }
           });
       }
   });
});

PHP

        <?php

    include "config.php";

    if (isset($_GET['search'])) {
       $Name = $_GET['search'];
       $Query = "SELECT food_name, food_category, food_time FROM food WHERE food_name LIKE '%$Name%' ";
       $ExecQuery = MySQLi_query($link, $Query);
       echo '
    <ul>
       ';
       while ($Result = MySQLi_fetch_array($ExecQuery)) {
           ?>
       <li onclick='fill("<?php echo $Result['food_name']; ?>")'>
         <p  onclick='fill2("<?php echo $Result['food_category']; ?>")'>
          <p2  onclick='fill3("<?php echo $Result['food_time']; ?>")'>

       <a>
           <?php echo $Result['food_name']; ?>
            <?php echo $Result['food_category']; ?>
             <?php echo $Result['food_time']; ?>

       </li></a>
       <?php
    }}
    ?>
    </ul>