This is probably the most polymer your demo can be... note: I fixed the imports to use polygit and removed your search button completely....
This can probably be more efficient, I needed a distraction from work so I tweaked things for you ;) http://plnkr.co/edit/Qzky7tpvGjNXu8Tt77hw?p=preview -Karl Tiedt On Fri, May 20, 2016 at 3:35 PM, Buba Bayo <[email protected]> wrote: > 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 > <https://groups.google.com/d/msgid/polymer-dev/b120ffcc-26c7-4a11-b52a-4c2d4a8fb226%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > 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/CADNgbTEXSQ2-O3h299_%2BbAgGMxZztBSqv5y1VF-eKENepELgRg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
