Фильтрация (форма поиска + чекбоксы с категориями) на ajax jquery php mysql

Question

Имеется БД с базой блюд. Используя input делаю сортировку при вводе слов с помощью ajax.

function search_dishes($rest, $Name){
global $db;
if($Name != ""){
    $query = "SELECT * FROM MenuItems WHERE (CategPath LIKE '%$rest%') and (Name LIKE '%$Name%') ORDER BY Ident ASC";
} else {
    $query = "SELECT * FROM MenuItems WHERE (CategPath LIKE '%$rest%') ORDER BY Ident ASC";
}
$res = mysqli_query($db, $query);
$dishes = array();
while($row = mysqli_fetch_assoc($res)){
    $dishes[] = $row;
}
return $dishes;}

Далее выполняю функцию и передаю ее в js

 function fill(Value) {
   $('#search').val(Value);
   $('#display').hide();
}
$(document).ready(function() {
   $("#search").keyup(function() {
       var name = $('#search').val();
           $.ajax({
               type: "POST",
               url: "ajax.php",
               data: {
                   search: name
               }, 
               success: function(html) {
                   $("#display").html(html).show();
               }
           });
   });
});

На данном этапе все работает, но к этому коду нужно добавить фильтрацию с чекбоксами из определенных категорий, чтобы отбор работал одновременно

<input class="checkbox" type="checkbox" name="checktag[]" value="<?=$tag['Tags']?>" id="toggle_<?=$tag['Id']?>">

Запрос меняю на

$query = "SELECT * FROM MenuItems WHERE (CategPath LIKE '%$rest%') and (Name LIKE '%$Name%') and (genWebMenu LIKE '%$tag%') ORDER BY Ident ASC";

Если обернуть чекбоксы в форму с submit и написать подобное, то на новой странице я получу нужную фильтрацию

if(isset($_POST['checktag'])){
  $checktag = $_POST['checktag'];
  $tag_string = implode(" ", $checktag);
  echo $tag_string;

  $dishes = get_dish_tag($tag_string);

Вопрос - как использовать вместе чекбоксы и фильтрацию в поле search и одновременно без перезагрузки страницы делать отбор. с Jquery, как и с JS в целом не знаком в принципе, но думаю, что нужно делать что-то подобное

 $("input.checkbox").on('change', function ()

Заранее спасибо за помощь

Answer 1

можно ajax-запрос сделать отдельной функцией именованной, в нее дописать проверку чекбоксов, и эту функцию вызывать и по вводу в поле, и по клику на чекбокс.

$(document).ready(function() {
  $('#search').on('input', getDishes);
  $('input.dishes_filter').on('click', getDishes);
});

var getDishes = function(){
  let request_data = {'filters': [], 'name': $('#search').val() };
  $('input.dishes_filter').each(function(e, elem){
    if( $(elem).is(':checked') ){
      request_data['filters'].push( $(elem).val() );
    }
  });
  
  // массив request_data готов для отправки серверу
  console.log(request_data);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<input id="search" type="text" value="" />
<input type="checkbox" value="filter1" class="dishes_filter" />
<input type="checkbox" value="filter2" class="dishes_filter" />
<input type="checkbox" value="filter3" class="dishes_filter" />

БЛОГ НА HUSL

Фильтрация (форма поиска + чекбоксы с категориями) на ajax jquery php mysql

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