So I have a live search which I am working on. And I was wondering why my detach() won't bring back the attachment after removing it. Basically the problem for me is that I hace two col-md-6 which handles two rows which displays many data (6 per column). My issue is that When I live search, the second column shows the items which matches the search result and the first column is blank (because the first column does not contain any which matches the search result). But it looks wierd as there is a huge gap in between and the results shows only on the second column. Here is an image example.
This is the default one,
And here is the searched one with the result,
As mentioned above, the first column stays empty so it takes that space. What I want is the items to move to first column if it is not already there. Here is my HTML,
<div class="row live-search-list">
<div class="col-md-6 first-column">
<ul class="menu-dish">
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-3.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 25.99</span>
<button class="addToBasket btn btn-primary btn-outline btn-md" data-toggle="modal" data-target="#exampleModalCenter">Add to Basket</button>
<h3>Grilled Beef with potatoes</h3>
<p class="cat">Meat / Potatoes / Rice / Tomatoe</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-4.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 30.99</span>
<button class="addToBasket btn btn-primary btn-outline btn-md" data-toggle="modal" data-target="#ModalCenter">Select Options</button>
<h3>Tuna Roast Source</h3>
<p class="cat">Tuna / Potatoes / Rice</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-5.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 40.00</span>
<h3>Roast Beef (4 sticks)</h3>
<p class="cat">Crab / Potatoes / Rice</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-6.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 20.50</span>
<h3>Salted Fried Chicken</h3>
<p class="cat">Crab / Potatoes / Rice</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-7.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 20.50</span>
<h3>Lumpia Shanghai</h3>
<p class="cat">Crab / Potatoes / Rice</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-8.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 20.50</span>
<h3>Chicken Adobo</h3>
<p class="cat">Crab / Potatoes / Rice</p>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="menu-dish">
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-9.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 25.99</span>
<h3>Marinated Beef</h3>
<p class="cat">Meat / Potatoes / Rice / Tomatoe</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-10.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 30.99</span>
<h3>Fried Tokwa</h3>
<p class="cat">Tuna / Potatoes / Rice</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-11.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 40.00</span>
<h3>Letson Kawali</h3>
<p class="cat">Crab / Potatoes / Rice</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-12.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 20.50</span>
<h3>Fried Pork</h3>
<p class="cat">Crab / Potatoes / Rice</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-13.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 20.50</span>
<h3>Chopsuey</h3>
<p class="cat">Crab / Potatoes / Rice</p>
</div>
</li>
<li>
<figure class="dish-entry">
<div class="dish-img" style="background-image: url(images/dish-14.jpg);"></div>
</figure>
<div class="text">
<span class="price">MVR 20.50</span>
<h3>Sunny sideup egg</h3>
<p class="cat">Crab / Potatoes / Rice</p>
</div>
</li>
</ul>
</div>
</div>
And my Jquery for live search,
jQuery(document).ready(function($){
$('.live-search-list li').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('.live-search').on('keyup', function(){
var searchTerm = $(this).val().toLowerCase();
$('.live-search-list li').each(function(){
if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
As you can see in html I have two col-md-6. Sorry about the long code.
I'd suggest just having one column instead of two. You can use flexbox to arrange your items properly in a grid and then as items are removed your other items will take up the empty space automatically. This would be a lot easier than trying to manage two columns and detaching and attaching
@REALRANDYALLEN - Ok can you at lease point me in to the right direction on this?
Here is what I am trying now. Basically when I search, it adds display:none; to the elements which are hidden. But when I try this,
if ($('.first-column ul li > :hidden').length <= 0) {
console.log('empty');
}
it does not work. The .first-column is the first col-sm-6 and I am trying to count the hidden elements and if the count of hidden elements are smaller than or equal to 0, it does not work. It just gives me 'empty' when there are still non hidden elements. And if I keep hitting backspace repeatedly even after the input is empty, it console logs 'empty'. I want to know why this happens and how to make that work at least.
@PICKAB00 - Here's a very ugly fiddle since I don't have your images or css but all I did was remove the columns and bring all the list items under one ul. Also important is the d-flex and flex-wrap classes added to the ul
@REALRANDYALLEN - I actually took your advice and changed the cols to flexbox and used media queries to fit them in to different view ports. Thanks!
@REALRANDYALLEN - Thank you so much for the advice. Now which one should I select as the best answer? I took your advice and used flexbox rather than columns. Also one more question. I have used media queries and fitted the items in to specific width and used flex like so. This is one of the queries.
@media only screen and (max-width: 1200px) and (min-width:991px) {
.menu-item-list-wrapper ul li {
width: 50%;
display: inline-flex;
}
}
This is still a good way of achieving this right? The reason I am asking is because I always have the fear that when it comes to designing, I may be coding the wrong way while there is a right way.
@PICKAB00 - I'd say in this case as long as it's doing what you want it to do you're good :) . I think the refactor from columns to flexbox made a lot of sense
Pick whichever answer you think helped you the most :)
@REALRANDYALLEN - Yes it did a lot more sense. I thought of how annoying it would be to loop through the menu items from the database as well. So flex was the better choice. Thanks again :)
Please or to participate in this conversation.