-2
我不知道如何進行搜索時自動刷新結果，當鍵入時，如何在JQuery中實現搜索功能？
我也需要使它不區分大小寫，並且如果沒有結果來顯示段落class =「not-found」。 我不知道如何進行搜索時自動刷新結果，當鍵入時，
我也需要使它不區分大小寫，如果沒有結果顯示段落class =「not-found」。
var usersArray = [
{
name: "Jhon Doe",
age: 21,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Jane Doe",
age: 20,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Milo Westfall",
age: 31,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Dayna Bennefield",
age: 27,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Danny Eckhoff",
age: 18,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Estella Fosdick",
age: 51,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Farah Benson",
age: 77,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Keith Gross",
age: 21,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Malcolm X",
age: 20,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Jhon Cena",
age: 31,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Rich Ross",
age: 27,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Charlie Sheen",
age: 44,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Lena Donovan",
age: 51,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Jay Kos",
age: 77,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Vincent Robert",
age: 21,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Adam Rodriguez",
age: 20,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Jhon Travolta",
age: 31,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Ben Mackferson",
age: 27,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Stella Cox",
age: 18,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Jenna Johnson",
age: 51,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
},
{
name: "Bill Tim",
age: 77,
image: "https://placeimg.com/140/140/people?t=" + Math.random()
}
]body {
margin: 0;
padding: 0;
font-family: 'Zilla Slab', serif;
}
.container {
width: 810px;
margin: 0 auto;
}
h2 {
float: left;
}
#search {
float: right;
margin-top: 30px;
}
.clear {
clear: both;
}
.not-found {
text-align: center;
display: none;
}
.users {
display: flex;
flex-wrap: wrap;
}
.user-card {
flex: 0 0 auto;
flex-basis: 140px;
margin: 5px;
padding: 5px;
text-align: center;
border: 1px solid #eee;
border-radius: 5px;
}
.user-image img {
width: 140px;
height: 140px;
border-radius: 5px;
}
.user-info {
margin-top: 10px;
}
.user-info .name, .user-info .age {
margin: 0;
}
#template {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Users loaded from JSON</title>
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Users:</h2>
<input type="text" id="search" placeholder="Search by name...">
<div class="clear"></div>
<div id="template" class="user-card">
<div class="user-image">
<img src="">
</div>
<div class="user-info">
<h4 class="name"></h4>
<h5 class="age"></h5>
</div>
</div>
<p class="not-found">
No users found, please change search criteria...
</p>
<section class="users">
<!-- Users loaded here -->
</section>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="users.js"></script>
<script src="script.js"></script>
</body>
</html>
這就是第三個環節 - nbNZM.jpg – BRD
能否請您分享一些代碼.... ??? – Shiladitya
請提供您的[mcve] _在問題中使用文字，而不是images_。 – evolutionxbox