Menu icon Foundation
Reorder Block Grid on Search

I am using Foundation 6.1.1 and looking to use a block grid to add products with a search box.

When someone starts to type in the search box, I would like the blocks to reorder, so the closet matching is at the top.

Is this possible with Foundation. Because the data is already on the screen, I rather not make more calls to reorder, so thought if I put something within the each columns block, it would reorder ?

Here is an example of my code:

while ($row = $stmt->fetch_assoc()) {  //creating new table row per record
            extract($row);
            $price = money_format('%i', $price);
            ?>
            <div class="columns">
                <p><img src="http://lorempixel.com/200/200/technics/"</p>
                <p class="text-center"><?php echo $name; ?></p>
                <p class="text-center">£<?php echo $price; ?></p>
                <p class="text-center"><a class="small button" href="product.php?id=<?php echo $id; ?>">Select</a></p>
            </div>
            <?php
        }
            

         

grid blockreorder

I am using Foundation 6.1.1 and looking to use a block grid to add products with a search box.

When someone starts to type in the search box, I would like the blocks to reorder, so the closet matching is at the top.

Is this possible with Foundation. Because the data is already on the screen, I rather not make more calls to reorder, so thought if I put something within the each columns block, it would reorder ?

Here is an example of my code:

while ($row = $stmt->fetch_assoc()) {  //creating new table row per record
            extract($row);
            $price = money_format('%i', $price);
            ?>
            <div class="columns">
                <p><img src="http://lorempixel.com/200/200/technics/"</p>
                <p class="text-center"><?php echo $name; ?></p>
                <p class="text-center">£<?php echo $price; ?></p>
                <p class="text-center"><a class="small button" href="product.php?id=<?php echo $id; ?>">Select</a></p>
            </div>
            <?php
        }
            

         
Rafi Benkual almost 4 years ago

Sure you can do this with Foundation! There are jQuery plugins that can make it easier though. Maybe Isotope http://isotope.metafizzy.co/ or Mixitup https://mixitup.kunkalabs.com/