title: How to force input autocomplete popup from javascript
body: <p>My idea is to mix two inputs one for user input and second for autocomplete popup.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ibox {
    position:relative;
    width:200px;
    height:30px;
  }
  #i1 {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width: 100px;
    z-index:20;
  }
  #i0 {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width: 200px;
    background: gray;
    z-index:10;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form autocomplete="on"&gt;
    Email: &lt;div class="ibox"&gt;
    &lt;input type="email" id="i0" name="email"&gt;
    &lt;input type="email" id="i1" name="email"&gt;
    &lt;/div&gt;
    &lt;br&gt;
  &lt;/form&gt;
  
  
  Click on input and you should see autocomplete popup. </code></pre>
  </div>
  </div>
  </p>
  
  <p>General questions:</p>
  
  <ul>
  <li>How to prevent autocomplete popup on white input but leave on gray?</li>
  <li>How to force gray input autocomplete popup when white input clicked
  or some characters was entered? I want hide gray input and use it for autocomplete popup only.</li>
  </ul>