0
検索ボタンをクリックすると、検索結果を別のページに表示/表示しようとしています。javascript/polymerjsの別のページに検索結果を表示/表示しよう
現在、私のコードは、json配列の入力値から検索し、見つかった場合は値を返し、見つからない場合はメッセージを返します。
しかし、私はその検索結果を同じページの代わりに "search-result.html"のような別のページに表示します。
ここに私がこれまで持っていて、検索はうまくいきます。
index.htmlを
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="https://rawgit.com/Polymer/polymer/v1.2.2/polymer.html" />
<script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://elements.polymer-project.org/bower_components/iron-elements/iron-elements.html">
<link rel="import" href="http://www.polymer-project.org/1.0/components/paper-input/paper-input.html">
<link rel="import" href="http://www.polymer-project.org/1.0/components/paper-dropdown-menu/paper-dropdown-menu.html">
<style>
.taller {
height: 120px;
}
[vertical-align="top"] ul {
margin-top: 0;
}
[vertical-align="bottom"] ul {
margin-bottom: 0;
}
button,
paper-button {
border: 1px solid #ccc;
background-color: #eee;
/*padding: 1em;*/
border-radius: 3px;
cursor: pointer;
}
button:focus {
outline: none;
border-color: blue;
}
</style>
</head>
<body>
<dom-module id="employee-list">
<template>
<input type="text" id="searchEmp" placeholder="Search For employee" />
<br/>
<select>
<option value="">Select Department</option>
<option value="digital engamenet">Digital Engagement</option>
<option value="shared research">Shared Research</option>
<option value="research">Research</option>
</select>
<br/>
<button onclick="javascript:searchData()">Search</button>
<br/>
<br/>
<paper-listbox>
<template is="dom-repeat" items="{{items}}">
<div class="row">
<div class="col-sm-12" style="font-size:15px;font-family:'Open Sans'">
{{item.name}} - {{item.dept}}
</div>
<hr />
</div>
</template>
</paper-listbox>
<!-- would like this result show on another page on click of search -->
<div class="search-result">
<h3>Result</h3>
<div id="result"></div>
</div>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
items: {
type: Array
}
},
ready: function() {
this.items = [{
'name': 'Jack',
'dept': 'Digital Engagement'
}, {
'name': 'Buba',
'dept': 'Research'
}, {
'name': 'Kashif',
'dept': 'Shared Research'
}];
}
});
var items = [{
'name': 'Jack',
'dept': 'Digital Engagement'
}, {
'name': 'Buba',
'dept': 'Research'
}, {
'name': 'Kashif',
'dept': 'Shared Research'
}];
function searchData() {
var inputVal = document.getElementById('searchEmp').value.toLowerCase(),
i, len, data, prop, matches = [],
val;
for (i = 0, len = items.length; i < len; i++) {
data = items[i];
for (prop in data) {
if (data.hasOwnProperty(prop)) {
val = data[prop];
if (typeof val !== 'undefined' && val.toLowerCase && val.toLowerCase().indexOf(inputVal) >= 0) {
// this data matches
matches.push(data);
break;
}
}
}
}
showMatches(matches);
}
function showMatches(matches) {
var elem = document.getElementById('result'),
i, len, content = '';
if (typeof matches === 'undefined' || !matches.length) {
elem.innerHTML = '<i>No results found</i>';
return;
}
for (i = 0, len = matches.length; i < len; i++) {
content += '<div><b>Name:</b>' + matches[i].name + '</div>';
}
elem.innerHTML = content;
}
</script>
</dom-module>
<employee-list></employee-list>
</body>
</html>
検索result.html
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="https://rawgit.com/Polymer/polymer/v1.2.2/polymer.html" />
<script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://elements.polymer-project.org/bower_components/iron-elements/iron-elements.html">
<link rel="import" href="http://www.polymer-project.org/1.0/components/paper-input/paper-input.html">
<link rel="import" href="http://www.polymer-project.org/1.0/components/paper-dropdown-menu/paper-dropdown-menu.html">
<style>
.taller {
height: 120px;
}
[vertical-align="top"] ul {
margin-top: 0;
}
[vertical-align="bottom"] ul {
margin-bottom: 0;
}
button,
paper-button {
border: 1px solid #ccc;
background-color: #eee;
/*padding: 1em;*/
border-radius: 3px;
cursor: pointer;
}
button:focus {
outline: none;
border-color: blue;
}
</style>
</head>
<body>
<dom-module id="employee-list">
<template>
<input type="text" id="searchEmp" placeholder="Search For employee" />
<br/>
<select>
<option value="">Select Department</option>
<option value="digital engamenet">Digital Engagement</option>
<option value="shared research">Shared Research</option>
<option value="research">Research</option>
</select>
<br/>
<button onclick="javascript:searchData()">Search</button>
</template>
<div class="research-result">
<div class="layout">
<div class="layout__item u-1/4">
<h3>Result</h3>
</div>
</div>
</div>
<div id="notFound" class="searchResult">
<div class="layout">
<div class="layout__item u-1">
<p>No applicable NDA found for "{{filterValue}}"</p>
</div>
<div class="layout__item u-1/6">
<a href="/rm-new-nda">
<input type="button" id="create-new-nda" class="btn btn--primary" value="Request New NDA" />
</a>
</div>
</div>
</div>
<div id="found" class="searchResult">
<div class="layout">
<div class="layout__item u-1">
<p>Applicable NDA found for "{{filterValue}}". New NDA not required.</p>
</div>
</div>
</div>
</dom-module>
</body>
</html>
私はこれを行うにはどのようには考えています。誰かがここで助けてもらえますか？
ここにはプランカがあります。 http://plnkr.co/edit/iArppZ5ODDyCGvCF5pIp?p=preview