I am pretty new to Polymer and i have this issue where i want users to be
able to search through the JSON objects on button click (SEARCH BUTTON)
base on the user input and select option and return the message like
“match found or exist” if the values enter by the user exists in the json
object/array and if not return message that it is "not found”.
Also I want that results to be shown on another page onclick of search
button.
Here is what i have so far and nothing is returning.
<!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="searchCompany" 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 on-tap="Search">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 id="result"></div>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
items: {
type: Array
},
Search: {
type: String
}
},
ready: function() {
this.items = [{
'name': 'Jack',
'dept': 'Digital Engagement'
}, {
'name': 'Buba',
'dept': 'Research'
}, {
'name': 'Kashif',
'dept': 'Shared Research'
}];
},
Search: function() {
var searchVal =
document.getElementById('searchCompany').value,
i, len, data, prop, matches = [],
val, items = [];
console.log(searchVal);
for (i = 0, len = items.length; i < len; i++) {
data = items[i];
console.log(data);
for (prop in data) {
if (data.hasOwnProperty(prop)) {
val = data[prop];
if (typeof val !== 'undefined' && val.toLowerCase &&
val.toLowerCase().indexOf(searchVal) >= 0) {
// this data matches
matches.push(data);
break;
}
}
}
showMatches(matches);
}
},
showMatches: function(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>title:</b>' + matches[i].name +
'</div>';
}
elem.innerHTML = content;
}
});
</script>
</dom-module>
<employee-list></employee-list>
</body>
</html>
Here is the code i have so far:
http://plnkr.co/edit/9htBMs0ajJis8aSWbMoV?p=preview
Thank you in advance
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/b120ffcc-26c7-4a11-b52a-4c2d4a8fb226%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
