Thank you Karl. But if i can have the search result on a new page for example search-result.html will be great.
On Tuesday, May 24, 2016 at 4:00:40 PM UTC-7, Karl Tiedt wrote: > > 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] <javascript:> > > 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] <javascript:>. >> 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/da4131c9-a2d0-4806-a1b1-64c70c60d1d0%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
