Как я могу называть file в зависимости от выбирания статьи списка неудара в лунку?

Он продолжил с разрабатывая формуляра для кассира продаж, цель, которую я ищу в этом моменте:

В зависимости от неудара в лунку box создается список и этот производит автозавершать на основании письменного (Что уже функционирует со следующим кодом, занесенным в список в нижней части).

Код, который я использую для этого, - следующий:

Index.php


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>

$(document).ready(function() {




    $('#key').on('keyup', function() {
        var key = $(this).val();    

        var dataString = 'key='+key;
    $.ajax({
            type: "POST",
            url: "add_salecar.php",
            data: dataString,
            success: function(data) {
                //Escribimos las sugerencias que nos manda la consulta
                $('#suggestions').fadeIn(1000).html(data);
                //Al hacer click en algua de las sugerencias
                $('.suggest-element').on('click', function(){
                        //Obtenemos la id unica de la sugerencia pulsada
                        var id = $(this).attr('id');
                        //Editamos el valor del input con data de la sugerencia pulsada
                        $('#key').val($('#'+id).attr('data'));
                        $('#key').val('');

                        //Hacemos desaparecer el resto de sugerencias
                        $('#suggestions').fadeOut(1000);
                        alert('Has seleccionado el '+id+' '+$('#'+id).attr('data'));                        
                        location.reload();
                        return false;                            
                });
            }
        });
    });
}); 

</script>
</head>

<body>
<div class="container">        
    <div class="row">
        <div id="content" class="col-lg-12">
            <form class="form-inline" method="post" action="#">
                <div class="input-group input-group-sm">
                    <input class="search_query form-control" type="text" name="key" id="key" placeholder="Buscar...">
                </div>
            </form>

            <div id="suggestions"></div>
        </div>
    </div>
</div>


</body>
</html>


add_salecar.php



<?php
define('DB_SERVER', 'localhost');
define('DB_SERVER_USERNAME', 'root');
define('DB_SERVER_PASSWORD', '');
define('DB_DATABASE', 'whare_inv');

$connexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);

$html = '';
$key = $_POST['key'];

$result = $connexion->query(
    'SELECT * FROM products     
    WHERE status = 1 and 
    name  LIKE "%'.strip_tags($key).'%"
    ORDER BY id DESC LIMIT 0,5');


if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {                
        $html .= '<div><a class="suggest-element" data="'.utf8_encode($row['name']).'" id="product'.$row['id'].'">'.utf8_encode($row['name']).'</a></div>';
    }
}
echo $html;
?>

Опора, в которой я нуждаюсь, - это, чтобы знать, как реализовывать код, для того, чтобы показанного списка, выбрав статью вышеупомянутого списка приказывать называть файл php, чтобы реализовывать вставление реестра в базе данных на основании вышеупомянутой отборной статьи.

Заметь: В настоящее время код, который я показал, реализует функцию получения списка базы данных и реализации поисков внутри того же неудара в лунку box подобно автозавершению.

Заранее спасибо за Вашу опору.

Привет

0
задан 28.12.2019, 00:45
1 ответ

Из-за которого я вижу bГЎsicamente уже, ты считаешь это сделанным, sГіlo отсутствие, которое вместо бдительности, которую ты поднимаешь, envГ - является секундой так называемый ajax, этот раз в endpoint, что сохраняется отборный продукт:

$('.suggest-element').on('click', function() {
  var id = $(this).attr('id');
  $('#key').val($(this).text());

  return $.ajax({
    type: 'POST',
    url: 'persist_selection.php',
    data: {product_id: id}
  }).then(() => {
    $('#suggestions').fadeOut(1000);
    return;
  });
});

, Но если уже у тебя есть формуляр на экране, возможно, что он лучше, что он aГ±adas неудар в лунку с id продукта,

<form id="form">
  <input type="text" name="product_name" id="product_name">
  <input type="text" name="product_id" id="product_id">
</form>

и потом envГ - полный формуляр из-за ajax:

$('.suggest-element').on('click', function() {
  var id = $(this).attr('id');
  $('#product_name').val($(this).text());
  $('#product_id').val(id);
  return $.ajax({
    type: 'POST',
    url: 'persist_selection.php',
    data: $('#form').serialize()
  }).then(() => {
    $('#suggestions').fadeOut(1000);
    return;
  });
});

Относительно твоего listener на keyup на ящике текста, fГ-jate, что каждый раз, когда ты пишешь estГЎ сгибая так называемый ajax. Для, когда ты написал слово, были приклеены 10 названных, которые не были необходимы. В следующем примере тебе оставил одна implementaciГіn где так называемый ajax estГЎ debounced.

Вместо

 function llenaSugerencias() { .... }

 $('#keyproduct_name').on('keyup', llenaSugerencias);

Ты Объявляешь timer для того, чтобы было согнуто наполнение 500ms despuГ©s. Если призывается listener в меньше 500ms, resetea timer (потом она invocaciГіn оригинал не работает) и закрепляет другой timer:

function llenaSugerencias() { .... }

$('#product_name').on('keyup', () => {
  this.timer = this.timer || null;
  clearTimeout(this.timer);
  this.timer = setTimeout(llenaSugerencias, 500);
});

В других словах, если ты пишешь 10 букв с меньшими интервалами 500ms, sГіlo, сгибает Гєltimo (я поместил 500 произвольно).

var mockup_autocompletar = [{
    "id": 40011,
    "name": "Lenovo IdeaPad 320-14"
  },
  {
    "id": 37462,
    "name": "HP Pavilion 15-CD006LA"
  },
  {
    "id": 35626,
    "name": "Dell Alienware 17"
  },
  {
    "id": 31754,
    "name": "ASUS VivoBook E402NA-GA034T"
  },
  {
    "id": 37471,
    "name": "Apple MacBook Air MQD32CI/A"
  }
];

function returnJSON(data) {
  var blob = window.URL.createObjectURL(
    new Blob([data], {
      type: 'application/json'
    })
  );

  return blob;
}

async function llamadoAjax(payload, delay = 1000) {
  return new Promise(resolve => {
    timer = setTimeout(() => {
      console.log('trayendo sugerencias');
      $.get(
        returnJSON(JSON.stringify(payload))
      ).then(resolve);
    }, delay);
  });
}

async function llenaSugerencias() {
  $('#suggestions').empty().fadeOut(1000);
  let productos = await llamadoAjax(mockup_autocompletar) || [];
  $('#suggestions').fadeIn(1000);
  productos.forEach(producto => {
    let option = $('<option class="suggest-element"/>');
    option.prop('value', producto.id)
      .data('product', producto)
      .text(producto.name)
      .appendTo('#suggestions');
  });
}
$(document).ready(function() {

  $('#alert').on('click', '.close', () => {
    $('#alert').removeClass('show');
  });
  $('#suggestions').on('click', () => {
    let selectedOption = $(this).find('option:selected');
    if (!selectedOption) {
      return;
    }
    let selectedProduct = selectedOption.data('product'),
      form = $('#product_name').closest('form');
    $('#product_name').val(selectedProduct.name);
    $('#product_id').val(selectedProduct.id);

    $('#suggestions').empty().fadeOut(1000);
    $('#alert').addClass('show');
    $('#alert').find('pre').text(`Enviando POST con datos del producto...`);
    llamadoAjax(selectedProduct, 2000)
      .then(res => {
        $('#alert').find('pre').text(`Producto enviado: 
          ${JSON.stringify(res)}`);

      });
  });
  $('#product_name').on('keyup', () => {
    this.timer = this.timer || null;
    clearTimeout(this.timer);
    this.timer = setTimeout(llenaSugerencias, 500);
  });

});
#suggestions {
  overflow-y: auto;
}

#suggestions option {
  font-size: 0.85em;
  padding: 0.2em;
  cursor: pointer;
}

#suggestions option:hover {
  background-color: #ececec;
}

#alert {
  font-size: 0.85em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div id="content" class="col-lg-12">
      <form class="form-inline" method="post" action="#">
        <div class="input-group input-group-sm w-100">
          <input class="wsearch_query form-control w-50" type="text" name="product_name" id="product_name" placeholder="Buscar..." />
          <input class="ml-5 form-control " type="text" name="product_id" id="product_id" placeholder="#id" readonly />
        </div>
      </form>



      <select id="suggestions" class="custom-select" style="display:none" size="5">
      </select>
      <div id="alert" class="alert alert-primary alert-dismissible fade" role="alert">
        <pre></pre>
        <button type="button" class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
      </div>
    </div>
  </div>
0
ответ дан 29.12.2019, 09:10

Теги

Похожие вопросы