title: Using Typeahead with iFrame
body: <p>I am trying to implement autocomplete using Twitter typeahead library for a iFrame so that When I start typing in iframe the suggestions should start showing up but it isnt. </p>
  
  <p><strong>HTML Code</strong>: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;iframe id="editorArea-frame" style="width:100%; height:100%;" frameborder="0"&gt;&lt;/iframe&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  &lt;script type="text/javascript" src="iframe.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p><strong>Javascript code</strong></p>
  
  <pre><code>var editorFrame = $('#editorArea-frame')[0];
  
  var html = '';
  
  html += '&lt;style type="text/css"&gt;pre { background-color: #eeeeee; }&lt;/style&gt;';
  
  html += '&lt;style type="text/css"&gt;html,body { cursor: text; } #editorDiv { display: inline-block; height: 100%; width: 100%; overflow-y:scroll; outline: none;}&lt;/style&gt;';
  
  html += '&lt;body&gt;&lt;/div&gt;&lt;div id="editorDiv" contentEditable="true"&gt;&lt;/div&gt;&lt;/body&gt;';
  
  editorFrame.contentDocument.open();
  
  editorFrame.contentDocument.write(html);
  
  editorFrame.contentDocument.close();
  </code></pre>
  
  <p>When I execute this piece of javascript code the iframe becomes blank and its body becomes empty.Can anyone point me as to what am i doing wrong?</p>
  
  <pre><code>   $('#editorArea-frame').typeahead({
        source: function(typeahead, query) {  
        return ['alpha', 'beta', 'bravo', 'delta', 'epsilon', 'gamma', 'zulu'];
        }
     });
  </code></pre>