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 polymer-dev+unsubscr...@googlegroups.com. 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.