-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]は、画像ではなくテキストを使って質問に答えてください。 – evolutionxbox