Regional Search

a5f68f40e2574e5ab08c76c393c0aa4c

This is a search tool. You can use the Fill-out Form to conduct a search within a zip code. The results of your search will be shown both inside a Listing Table and on Google Maps.

Parts List

• 1 × Collection Counter

  1. counter (see snippet below)

• 1 × Electric Glass

  1. glass (see snippet below)

• 1 × Fill-Out Form

  1. search_form (see snippet below)

• 1 × Listing Table

  1. table (see snippet below)

• 1 × Minimal Google Maps

  1. map (see snippet below)

• 1 × Trigger

  1. trigger (see snippet below)

• 1 × Yahoo API Service

  1. local_search (see snippet below)

Parts Configuration

To try these parts as used, simply copy and paste the following snippet of HTML into a Constructible HTML file.

• counter

  <div properties="emits_when_count_is_zero:'There Were No Results!'"
       script="http://js.constructibl.es/specs/CollectionCounter2.js"
       id="counter"
       spec="7E02AE87F1054314A59EF86F6E8A8F6D">
  </div>

• glass

  <style type="text/css">
  #glass  {    
      position:absolute;
      left:1in;
      top:3in;
      width:500px;
      height:510px;
      overflow:hidden;
  }
  
  #glass {
      background-color:#33302a;
      z-index:1;
      filter: alpha(opacity=0); /* internet explorer */
      -khtml-opacity: 0.0;      /* khtml, old safari */
      -moz-opacity: 0.0;       /* mozilla, netscape */
      opacity: 0.0;           /* fx, safari, opera */	
      color:#cccccc;
      font-size:60pt;
      padding-top:20px;
      line-height:120%;
  }
  </style>
  
  <div spec="B6322BDCD73140A18873C2F3F86FFED2"
       script="http://js.constructibl.es/specs/ElectricGlass2.js"
       id="glass"
       properties="fogs_to_percent:100, fogs_in_seconds:.5">
  </div>

• local_search

  <div is_proxy="true"
       properties="uses_app_id : 'YahooDemo'"
       script="http://js.constructibl.es/specs/YahooApiTunnel2.js"
       id="local_search"
       spec="4599AC011A64B18A61960BB6535EF24">
   <a href="http://local.yahooapis.com/LocalSearchService/V3/localSearch"
      rel="rpc">
   </a>
  
  </div>

• map

  <style type="text/css">
  #map {
      color:#33302a;
  }
  
  #map a {
      color:#23201a;
      font-weight:bold;
  }
  
  #map {
      position:absolute;
      left:7in;
      top:3in;
      width:500px;
      height:510px;
      border:1px solid #cccccc;
  }
  </style>
  
  <div properties="centers_latitude_at:40.4469,
                   centers_longitude_at:-80.0244,
                   does_show_zoom_control:true,
                   does_show_pan_control:true,
                   does_show_map_type_control:true"
       script="http://js.constructibl.es/specs/SimpleGoogleMap2.js"
       id="map"
       spec="7D835839F7BD4A01A6F0481718F570A9">
   <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAUn6kNiGjsClSWKuUfiB_ZRR6gm6fGJzlvvrGh6msBqsTJa4pPRQjNjh3BLXA_lzJddOU3O-JvSZmxQ">
   </script>
  
  </div>

• search_form

  <style type="text/css">
  #search_form {
      position:absolute;
      top:2in;
      left:1in;
      width:900px;
  }
  
  #search_form h1 {
      font-family:arial;
      font-size:18pt;
  }
  
  #search_form input, #search_form label {
      font-size:22pt;
      font-family:arial;
      margin-right:4px;
  }
  
  #search_form input.Query,  #search_form input.ZipCode  {
      border-width:0px;
      border-bottom:1px dotted #999999;
      font-weight:bold;
      background-color:#33302a;
      color:#7BAAB0;
  }
  
  #search_form input.Submit {
      border-width:1px;
      -moz-border-radius: 5px; 
      -webkit-border-radius: 5px;
      border-radius:5px;
      background-color:#547F8C;
  }
  
  #search_form input.Query {
      width:250px;
  }
  
  #search_form input.ZipCode {
      width:100px;
  }
  
  #search_form label, #search_form input.Submit {
      color:#FFF2C2;
  }
  
  #search_form fieldset {
      border:0px;
      padding:0px;
  }
  </style>
  
  <div class="SearchForm"
       script="http://js.constructibl.es/specs/Form2.js"
       id="search_form"
       spec="4D0FB729369A465CA71349E8D8715830">
   <form>
    <fieldset>
     <label for="query">Search for
     </label>
  
     <input type="text"
            class="Query"
            value="pizza"
            name="query"/>
     <label for="zip">in zipcode
     </label>
  
     <input type="text"
            class="ZipCode"
            value="02903"
            name="zip"/>
     <label>,
     </label>
  
     <input disabled="true"
            type="submit"
            class="Submit"
            value="please."/>
     <input type="hidden"
            name="results"
            value="20"/>
    </fieldset>
  
   </form>
  
  </div>

• table

  <style type="text/css">
  #table {
      z-index:0;
  }
  
  #table, #glass  {    
      position:absolute;
      left:1in;
      top:3in;
      width:500px;
      height:510px;
      overflow:hidden;
  }
  
  #table table {
      /*border-collapse:collapse;*/
      table-layout:fixed;
      width:100%;
      height:100%;
      overflow:hidden;
      color:#93908a;
  
  }
  
  #table td {
      border-bottom:1px solid #666;
      font-size:10pt;
      text-overflow:ellipsis;
      -o-text-overflow: ellipsis;  
      -ms-text-overflow: ellipsis; 
      overflow:hidden;
      line-height:20px;
      height:20px;
      white-space:nowrap;
  }
  
  #table col.Column1 {
      width:225px;
  }
  
  #table col.Column2 {
      width:175px;
  }
  
  #table col.Column3 {
      width:100px;
  }
  
  #table tr {
      cursor:pointer;
  }
  
  #table td.col1 {
  font-weight:bold;
      color:#a3a09a;
  
  }
  
  #table tr.Matched td.col1 {
      color:#23201a;
  }
  
  #table th {
      font-weight:bold;
  
  }
  
  #table tr.Matched {
      background-color:#7BAAB0;
      color:#33302a;
  }
  </style>
  
  <div class="Table"
       spec="FB4371C7AFC24776B0231A92F3C4A6C2"
       script="http://js.constructibl.es/specs/Tabulator2.js"
       id="table"
       properties="sets_the_matched_row_css_class_to: 'Matched'">
   <table>
    <col class="Column1"/>
    <col class="Column2"/>
    <col class="Column3"/>
    <thead>
     <tr>
      <th field="name">
      </th>
  
      <th field="street">
      </th>
  
      <th field="telephone_number">
      </th>
  
     </tr>
  
    </thead>
  
    <tbody>
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
     <tr>
      <td class="col1">
      </td>
  
      <td>
      </td>
  
      <td>
      </td>
  
     </tr>
  
    </tbody>
  
   </table>
  
  </div>

• trigger

  <div properties="emits_when_triggered:'Searching...'"
       script="http://js.constructibl.es/specs/Trigger.js"
       id="trigger"
       spec="4B7A1FD417F541BDBB4748829ADE97FF">
  </div>

Technical Specifications

Inputs

No inputs are specified.

Outputs

No outputs are specified.