user3681937 user3681937 - 5 months ago 8
jQuery Question

JQuery Filtering Using Bootstrap Columns

So I have this working fiddle: https://jsfiddle.net/p5ahob32/1/

$('#filter').keyup(function () {

var filter = $(this).val(), count = 0;

$('.col-md-3 a').each(function () {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();

// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();

count++;
}
});

// Update the count
var numberItems = count;
$("#filter-count").text("Number of Clients = " + count);
});


If you were to type 3 in the search box it would fade out all the other buttons except 3, however you will notice that the 3 button is all the way in the right because it is in a bootstrap column.

My question is how to I make it so that all the searched items will appear stacked nicely together at the top left?

Thank you!

Answer

get rid of all the rows except the outer one that wraps all the col's and hide parent of the <a>

$(this).parent().fadeOut();
//AND
$(this).parent().show()

DEMO