How to force input autocomplete popup from javascript

Question

My idea is to mix two inputs one for user input and second for autocomplete popup.

.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;
}

<form autocomplete="on">
  Email: <div class="ibox">
  <input type="email" id="i0" name="email">
  <input type="email" id="i1" name="email">
  </div>
  <br>
</form>


Click on input and you should see autocomplete popup.

General questions:

How to prevent autocomplete popup on white input but leave on gray?
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.

Duplicate with http://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag — Tyler.z.yang, Oct 13 '16 at 07:57

score 0 · Answer 1 · answered Oct 13 '16 at 07:59

you can set autocomplete="off"

.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;
}

<form autocomplete="on">
  Email: <div class="ibox">
  <input type="email" id="i0" name="email">
  <input type="email" id="i1" name="email"  autocomplete="off">
  </div>
  <br>
</form>


Click on input and you should see autocomplete popup.

Yes, first question solved, how about second general question? Force gray input autocomplete popup while user input in white? It means display popup menu. — Dmitry, Oct 13 '16 at 08:02

How to force input autocomplete popup from javascript

1 Answers1