Kez Kez - 7 months ago 19
Javascript Question

Live jQuery search issue - display issue

I have List and Grid views and a input box, where you can search for the li elements. The search works fine on both views. However, If you search on one view and then switch to another, it is changes the width of the li element and displays incorrectly.

HTML: Input and count display

<div class="input-group pull-left seach_holder">
<form id="live-search" action="" class="styled live-search" method="post">
<input style="width:200px;" id="filter_vacs" type="text" class="search-bar form-control" placeholder="search">
<span class="vac_count_2" id="filter-count"></span>
<div class="input-group-btn">
</div>
</form>
</div>


JS: Live Search

$(document).ready(function(){
$("#filter_vacs").keyup(function(){

// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;

// Loop through the comment list
$(".parent_vac li").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(1000);

// 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(""+count);


});
});


Thank for any help!

Answer

This can happen when element takes "initial" value of display property according to CSS Specification (ofc. only if you didn't set it).

So fadeOut & show set display property as inline css, and overwrite your css.

Solution 1

Try to replace this code:

$(this).fadeOut(1000); / $(this).show();

On

$(this).addClass('hidden'); / $(this).removeClass('hidden');

And if it's will help, then use it :)

Solution 2

https://jsfiddle.net/Mastrix/kgjrum4L/

If no then we need, your fiddle link

Comments