当您点击搜索按钮时，我正试图在另一个页面上显示/显示我的搜索结果。
现在我的代码正在做的是它从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>
我不知道该怎么做。有人可以帮忙吗。
答案 0 :(得分：0)
您可以使用iron-pages元素创建两个不同页面的外观。如果您真的需要它作为结果的不同网址，我建议您尝试使用新的app-route elements。理想情况下，搜索页面和搜索结果页面可能是他们自己的元素，而不是像他们在这里的硬编码div，但你明白了。
<dom-module id="my-demo">
<template>
<iron-pages selected="[[currentPage]]">
<div>
<select value="{{searchTeam::change}}">
<option value="Jacob">Jacob</option>
<option value="Edward">Edward</option>
</select>
<button on-tap="doSearch">search</button>
<ul><template is="dom-repeat" items="{{data}}"><li>{{item.name}} {{item.team}}</li></template></ul>
</div>
<div>
<h2>Search Results</h2>
<ul><template is="dom-repeat" items="{{searchResults}}"><li>{{item.name}} {{item.team}}</li></template></ul>
<button on-tap="goHome">Back to Search</button>
</div>
</iron-pages>
</template>
<script>
var data = [
{name: 'foo', team: 'Jacob'},
{name: 'bar', team: 'Edward'},
{name: 'baz', team: 'Jacob'},
{name: 'qux', team: 'Edward'}
]
Polymer({
is: 'my-demo',
ready: function () {
this.data = data
},
properties: {
searchTeam: {
type: String,
value: 'Edward'
},
searchResults: {
type: Array
},
currentPage: {
type: Number,
value: 0
}
},
doSearch: function () {
this.searchResults = this.data.filter(function (item) { return item.team === this.searchTeam }.bind(this))
this.currentPage = 1
},
goHome: function () { this.currentPage = 0 }
})
</script>
</dom-module>