-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>Address Book</title>
-
<style>
-
.active { background: #ddd; }
-
.hovering { background: #eee; }
-
form > div { padding: 10px; }
-
</style>
-
</head>
-
<body>
-
<h1>Address Book</h1>
-
<form action="" method="get" id="search-form">
-
<div class="section">
-
<label for="q">Search address book</label>
-
<input type="search" id="q" name="q" required placeholder="type a name">
-
</div>
-
<div class="button-group">
-
<button type="submit" id="btn-search">search</button>
-
<button type="button" id="get-all">get all contacts</button>
-
</div>
-
</form>
-
<div id="output"></div>
-
-
</body>
-
</html>
-
<script>
-
var contacts = {
-
"addressBook":[
-
{
-
"name":"helle",
-
"email":"jill@example.com",
-
},
-
{
-
"name":"helle1",
-
"email":"jill@example.com1",
-
},
-
{
-
"name":"helle2",
-
"email":"jill@example.com2",
-
},
-
{
-
"name":"helle3",
-
"email":"jill@example.com3",
-
},
-
{
-
"name":"helle4",
-
"email":"jill@example.com4",
-
}
-
]
-
};
-
var searchField = document.getElementById("q");
-
var adr = {
-
search:function(event){
-
event.preventDefault();
-
var target = document.getElementById("output");
-
-
var searchValue = searchField.value;
-
var book = contacts.addressBook;
-
var count = book.length;
-
var i;
-
target.innerHTML = "";
-
if(count>0&&searchValue !== ""){
-
for(i=0;i<count;i+=1){
-
var obj = contacts.addressBook[i],
-
-
isItFound = obj.name.indexOf(searchValue);
-
//console.log(obj);
-
if(isItFound !== -1){
-
target.innerHTML += '
'+obj.name +',
';
-
}
-
}
-
}
-
}
-
}
-
var searchForm = document.getElementById("search-form");
-
searchField.addEventListener("submit",adr.search,false);
-
var btn = document.getElementById("get-all");
-
// activate the click event on your button
-
btn.addEventListener("click", adr.search, false);
-
</script>
阅读(764) | 评论(0) | 转发(0) |
