Как реализовать вывод информации после выбора с поиска?

Question

у меня есть живой поиск, с использованием ajax и mysql, подскажите, как реализовать данный функционал? Поиск работает, но я не могу выбрать этот товар из поиска, далее после выбора товара из поиска, после нажатия на кнопку добавить товар, этот товар появляется под основной кнопкой, где открывается модальное окно, если нажать еще раз на кнопку добавить товар, появляется еще один новый товар под ранее выведенным, после все эти товары, мне нужно добавить в какой нибудь файл, в ворд или эксель.

Подскажите как это реализовать?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Живой поиск</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Вызываем модальное окно -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Добавить товар
</button>

<!-- Модальное окно -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Поиск товара</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-sm-3">
            </div>
            <div class="col-sm-6">
              <input type="text" class="form-control" id="search">
              <table class="table table-hover">
              <thead>
                <tr>
                  <th>Товар</th>
                  <th>Цена</th>
                </tr>
              </thead>
              <tbody id="output">

              </tbody>
            </table>
            </div>
            <div class="col-sm-3">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Добавить</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $("#search").keypress(function(){
      $.ajax({
        type:'POST',
        url:'search.php',
        data:{
          name:$("#search").val(),
        },
        success:function(data){
          $("#output").html(data);
        }
      });
    });
  });
</script>
</body>
</html>

Файл search.php

<?php

// Подключение к базе данных
include "db.php";

if(mysqli_num_rows($result)>0){
    while ($row=mysqli_fetch_assoc($result)) {
        echo "  <tr>
                  <td>".$row['product']."</td>
                  <td>".$row['price']."</td>
                </tr>";
    }
}
else{
    echo "<tr><td>Результатов не найдено</td></tr>";
}

?>

БЛОГ НА HUSL

Как реализовать вывод информации после выбора с поиска?

Ответы (0 шт):