如何显示筛选元素javascript
我刚刚开始学习javascript，然后我遇到了一个问题，“如何显示筛选元素”，我想在搜索任何标题时显示，他们会自动筛选并提到列表的顶部，我做了，但不知道我错在哪里 index.html 这是我编写整个ui部分的index.html文件如何显示筛选元素javascript,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我刚刚开始学习javascript，然后我遇到了一个问题，“如何显示筛选元素”，我想在搜索任何标题时显示，他们会自动筛选并提到列表的顶部，我做了，但不知道我错在哪里 index.html 这是我编写整个ui部分的index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
<title>Movie Application</title>
</head>
<style>
.carousel img {
width:100% !important;
min-width:100 !important;
height: 720px;
background-size: cover;
}
input[type="text"] {
background:lightgray;
}
.selects{
background: lightgray;
}
select option{
background:lightgray;
}
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 30px; /* Added */
}
</style>
<body>
<!-- Navbar session start -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-dark">
<a class="navbar-brand" href="#"><img src="images/logo.png" style="width: 50px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" >
<li class="nav-item " >
<a class="nav-link text-white" href="#"><b>Movies</b></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><b>TV Series</b></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><b>Audio</b></a>
</li>
</ul>
</div>
</nav>
<!-- navbar session end -->
<!-- carosal start -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/lagan.jpg" alt="..." >
</div>
<div class="carousel-item">
<img src="images/tanaji.jpg" alt="..." >
</div>
<div class="carousel-item">
<img src="images/sultan.jpg" alt="..." >
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- carosal end -->
<!-- Gerns start -->
<div class="container" style="margin-top: 50px; margin-bottom: 100px;">
<div class="row" id="items">
<div class="col-md-4">
<select class="form-control selects mt-1">
<option>Comedy</option>
<option>Action</option>
<option>Romance</option>
</select>
</div>
<div class="col-md-8 mt-1">
<input type="text" class="form-control" placeholder="Search Movies..." id="filter">
</div>
</div>
<div class="row mt-5 mx-auto">
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/idiots.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center"> Idiots</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/averanger.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">averanger</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">inception</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">jonh</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">randy</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">cm</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">ron</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">harry</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">stock</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">tom</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">big</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">kofi</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">drew</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">ben</h5>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="images/inception.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title text-center">shane</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Gerns End -->
<script src="index.js"></script>
</body>
</html>
您必须将
id='items'divh5id='items'divh5filteriemsvar itemlist = document.getElementById('items');
filter.addEventListener('keyup', filterItems);
// filter items
function filterItems(e) {
//convert text to lowercase
var text = e.target.value.toLowerCase();
// get title
var items = itemlist.getElementsByTagName('h5');
//convert to an array
Array.from(items).forEach(function (item) {
var itemName = item.firstChild.textContent;
if (itemName.toLowercase().indexOf(text) != -1) {
item.style.display = 'block';
item.style.cursor = 'pointer';
}
else {
item.style.display = 'none';
}
})
}