实时搜索过滤器

Question

我有一个由行和列组成的用户目录，我希望有一个实时搜索过滤器。

它可以工作，但不幸的是，它隐藏了比我想要的更多的东西。在JavaScript或jQuery方面我不是很好。

 <a href="" class="mdi mdi-account-search" data-toggle="collapse" data-target=".search-input" style="font-size:400%"></a>
        <div class="card-body">
            <div class="container collapse search-input">
                <input class="col-lg-3"  id="myInput" type="text" placeholder="Search..">
            </div>
        </div>
        @foreach( array_chunk($instructors, 3) as $threeInstructors)
        <div class="row">
            @foreach ($threeInstructors as $instructor)
            <div class="col-lg-4" id="myDIV">
                <div class="card m-b-20">
                    <div class="card-body">

                        <div class="media">
                            <img class="d-flex mr-3 rounded-circle thumb-lg" src="assets/images/users/avatar-2.jpg" alt="Generic placeholder image">
                            <div class="media-body">
                                <h5 id="namesearch" class="m-t-10 font-18 mb-1">{{$instructor->getName()}}</h5>
                                <p id="emailsearch" class="text-muted m-b-5">{{$instructor->getEmail()}}</p>
                            </div>
                        </div>

                        <div class="row text-center m-t-20">
                            <div class="col-12">
                                <h5 class="mb-0">{{$instructor->getTotalCourses()}}</h5>
                                <p class="text-muted font-14">Courses</p>
                            </div>
                        </div>

                        <ul class="social-links text-center list-inline mb-0 mt-3">
                             <li class="list-inline-item">
                                <a title="" href="{{ route('admin.userAdjustments', array($instructor->getAuthIdentifier())) }}"  data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="User Settings" style="text-decoration: none;"><i class="mdi mdi-account-settings-variant" style="font-size:170%"></i></a>
                            </li>
                            <li class="list-inline-item">
                                <a href="" title="" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="Edit Info"><i class="mdi mdi-account-card-details" data-id="{{ $instructor->getAuthIdentifier() }}" data-name="{{ $instructor->getName() }}" data-email="{{ $instructor->getEmail() }}" data-toggle="modal" data-target=".editInfo" style="font-size:170%"></i></a>
                            </li>
                            <li class="list-inline-item">
                                <a href="" title="" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-title="Delete"><i class="mdi mdi-account-remove" data-id="{{ $instructor->getAuthIdentifier() }}" data-toggle="modal" data-target=".deleteModal" style="font-size:170%"></i></a>
                            </li>
                        </ul>

                    </div>
                </div>
            </div> <!-- end col -->
            @endforeach
        </div> <!-- end row -->
        @endforeach

当您搜索某些内容时，它会删除过多的html。我希望div正方形保留其所有元素，而仅显示具有正确信息的那个

这是JavaScript代码

 $(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Answer 1

尝试使用此搜索过滤器jQuery

$('[data-search]').on('keyup', function() {
	var searchVal = $(this).val();
	var filterItems = $('[data-filter-item]');

	if ( searchVal != '' ) {
		filterItems.addClass('hidden');
		$('[data-filter-item][data-filter-name*="' + searchVal.toLowerCase() + '"]').removeClass('hidden');
	} else {
		filterItems.removeClass('hidden');
	}
});

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
}

.search {
	margin-bottom: 30px;
}

.items {
	
}

[data-filter-item] {
	padding: 15px;
	background-color: #ccc;
	border: 1px solid #fff;
}

.hidden {
	display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="container">
	<div class="search">
		<input type="text" placeholder="search" data-search />
	</div>
	<div class="items">
		<div data-filter-item data-filter-name="apple">Apple</div>
		<div data-filter-item data-filter-name="google">Google</div>
		<div data-filter-item data-filter-name="microsoft">Microsoft</div>
		<div data-filter-item data-filter-name="hp">HP</div>
		<div data-filter-item data-filter-name="dell">Dell</div>
		<div data-filter-item data-filter-name="samsung">Samsung</div>
	</div>
</div>