How to implement filter(ajax,php)?

Question

PHP

Hi all.

How to implement a filter that will show only those blocks in which there is relevant information, and hide all others?

There are tables "Regions", "Streets", and the most important table "Hotels". The table "Hotels" has columns "District", "Street". I write down the name of the district or street of the hotel in them, and do not pass the id from the tables.

For example, there is a district "Vasilyevsky" (made in the form of a checkbox), and when we click on this checkbox, a block with information will appear that has the value of the district "Vasilyevsky" in the database, and the others will be hidden. I want to note that you can select many values ​​in the filter: For example, the Vasilyevsky district, you can select the street "Popkova", "Pupkina" and hotels will be opened in the area.

In general, multi-checkboxes. Maybe there is some other option? Please help.

<form action="index.php" method="post">
        <div id="filter_c">
            <div class="rajon">
              <span>Rajon</span>
                  <div class="filter_l"> 
                    <?php foreach ($rajon as $id => $rajon): ?>
                        <div class="kbox">
                        <input type="checkbox" id="rajon_<?=$id;?>" value="<?=$id;?>" name="rajon[]" />
                          <label for="rajon_<?=$id;?>">
                            <span class="filter_name"><?=$rajon['rajon'];?></span>
                          </label>
                        </div>
                    <?php endforeach; ?>
                  </div>
            </div>
            <div class="street">
              <span>Street</span>
                  <div class="filter_l"> 
                    <?php foreach ($street as $id => $street): ?>
                        <div class="kbox">
                        <input type="checkbox" id="street_<?=$id;?>" value="<?=$id;?>" name="street[]" />
                          <label for="street_<?=$id;?>">
                            <span class="filter_name"><?=$street['street'];?></span>
                          </label>
                        </div>
                    <?php endforeach; ?>
                  </div>            
            </div>             
          </div>
      </form>

Here is the block with information that is output by the loop

<div class="desc">
      <h2><?=$hotel['name']?></h2>
       <p>Region: <?=$hotel['region']?></p>
    </div>

Answer 1

Send all hotels in JSON format to the client at once using ajax.

$.ajax({
...
dataType: 'JSON',
success: function(response){
otels = response;
}
...
});

When choosing a checkbox, display only those hotels that you need, for example

$('#checkbox').change(function(){
    $.each(otels, function(){
        if(this.region == $('#checkbox').val()){
            //Тут что-то делаем
        }
    });
});