title: How to append table head only once when loop through the JSON
body: <p>How to only once append table head when looping(search) through the JSON array?When I try this, every time when starting search table-head append for every match,  although two products belong the same group.</p>
  
  <blockquote>
    <p>HTML</p>
  </blockquote>
  
  <pre><code>&lt;/select&gt;
  Search: &lt;input type="text" name="search" id="search" /&gt;
  &lt;div id="place"&gt;&lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Java Script</p>
  </blockquote>
  
  <pre><code> $.ajaxSetup({ cache: false });
  
   $('#search').keyup(function(event){
   $('#place').html('');
   if (event.keyCode == 8) {
            $('#place').hide('')
            }else{
            $('#place').show('') 
            }
   $('#state').val('');
   var searchField = $('#search').val();
   var expression = new RegExp(searchField, "i");
  </code></pre>
  
  <p>LOOP JSON</p>
  
  <pre><code>  $.getJSON('product.json', function(result) {
     //LOOP JSON 
  </code></pre>
  
  <p>TABLE HEAD to appears only once in the search.</p>
  
  <pre><code>  $.each(result, function(key, value){
         //TABLE HEAD this need to apperas only one
         var text = '';
         text +='&lt;table class="table" width="610" cellpadding="3" 
          cellspacing="1" bgcolor="#cccccc"&gt;';
  
         text +='&lt;tr&gt;';
         text +='&lt;th width="20%" bgcolor="#aaaaaa" align="left"&gt;&lt;font 
         color="#ffffff"&gt;Model&lt;/font&gt;&lt;/th&gt;';
         text +='&lt;th width="25%" bgcolor="#aaaaaa"&gt;&lt;font color="#ffffff"&gt;CODEC 
         Supported&lt;/font&gt;&lt;/th&gt;';
  
         text +='&lt;/tr&gt;';
  
         text +='&lt;p style="font-size:15px; font-weight:bold; color:#2773ba; 
         margin-bottom:5px"&gt;'+value.brand+'&lt;/p&gt;'; 
         // END TABLE HEAD
  
         //END OF TABLE HEAD -START TABLE BODY
  
         // TABLE BODY is filling with data from json
  
        if (value.brand.search(expression) != -1 || 
        value.model.search(expression) != -1 || 
        value.CODECSupported.search(expression) != -1  )
         {
  
         text += '&lt;tr&gt;'
         text += '&lt;td colspan="9" align="left" bgcolor="#FFFFFF" style="font-
         weight:bold; color:#3399cc"&gt;'+value.type+'&lt;/td&gt;'
         text += '&lt;/tr&gt;'
         text += '&lt;tr&gt;'
         text += '&lt;td bgcolor="#FFFFFF"&gt;'+value.model+'&lt;/td&gt;'
         text += '&lt;td align="center" 
         bgcolor="#FFFFFF"&gt;'+value.CODECSupported+'&lt;/td&gt;'
         text += '&lt;/tr&gt;'
         text += '&lt;/table&gt;'
  
         $('#place').append(text)
  
  
        }
  
  
        });   
        });
        });
  </code></pre>
  
  <p>END OF BODY</p>
  
  <pre><code>  })
  </code></pre>