Search JSON Objects on button click base on user input in Polymer

156 views
Skip to first unread message

Buba Bayo

unread,
May 20, 2016, 6:35:37 PM5/20/16
to Polymer
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" />
               <link rel="import" href="http://www.polymer-project.org/1.0/components/paper-input/paper-input.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>


Thank you in advance

Karl Tiedt

unread,
May 24, 2016, 7:00:40 PM5/24/16
to Buba Bayo, Polymer
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 ;)


-Karl Tiedt

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...@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.

Buba Bayo

unread,
May 26, 2016, 4:31:53 PM5/26/16
to Polymer, bba...@gmail.com
Thank you Karl.

But if i can have the search result on a new page for example search-result.html will be great.
Reply all
Reply to author
Forward
0 new messages