24

I'm having some troubles with the default autocompletion of an input text. It does not move acordingly when scrolling. I would like that the autocomplete text stays right below the input. Is there a way to accomplish this?. This happens to me in Chrome browser Versión 57.0.2987.133

enter image description here

fiddle

<form action="/action_page.php" autocomplete="on">
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" ><br>
    <input type="submit">  
    <div style="height:150px">
    </div>
</form>
2
  • 5
    This looks like an implementation within the Chrome browser and cannot be changed using any client-side code because the autocomplete suggestions are not part of the DOM.
    – J. Titus
    Commented Aug 1, 2017 at 18:57
  • why not use some third party plugins which can show fancy type tool-tip with many effects. Please hit google for javascript/jquery plugins and hopefully you will find enough.
    – Star
    Commented Aug 7, 2017 at 12:16

4 Answers 4

11
+25

The browser does not give you access to the autocomplete tooltip so you can scroll it with the enclosing container. The default behaviour is removing the tooltip when you scroll the window, but it works differently with inner document containers, like the form in your case. I would suggest to force the general behaviour, removing the tooltip, by just removing and restoring the focus from the active input field in a form's onscroll event attribute.

form {
  height: 200px;
  overflow: auto;
}
<form action="/action_page.php" autocomplete="on"
        onscroll="var a = document.activeElement; a.blur(); a.focus();">
    <div style="height:50px"></div>
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" ><br>
    <input type="submit">
    <div style="height:150px"></div>
</form>

2
  • 2
    This works as long as you don't scroll too much, I've tried this but if the input is scrolled out of the visible area, chrome pushes the screen when the input get focus again. Commented May 30, 2018 at 9:09
  • 1
    thats because of the a.focus();, just remove it
    – nalm
    Commented Jan 6, 2022 at 15:06
6

Those autocomplete tooltips are an native implementation from Google Chrome and can, like on other browsers, not changed with css/js. This fact gives you two possibilities to solve your problem:

Clean up your markup. Semantic and clean html markup for forms is essential for error-resistance. Else it is a good solution to give users the chance to use the browser default autocompletion if they are used to it. Besides this autocomplete scripts are not meant to work for fornames or lastnames, more like for search / choosing an item from a list. A clean and mostly safe form markup could look like this jsfiddle:

Implement an autocomplete javascript plugin. There are a lot of script you can implement to give users a better experience by adding nessecary informations in documents. But as I sad its not common to use those for names.

form {
  background: #eee;
  border: 1px solid #ddd;
  padding: 10px;
  max-width: 250px;
}

.form-row {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 4px;
}

input[type="text"],
input[type="email"]{
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}
<form action="/action_page.php" autocomplete="on">

  <div class="form-row">
    <!-- labels on top of inputs can improve usability alot -->
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
  </div>
  
  <div class="form-row">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
  
  <div class="form-row">
    <label for="email">E-mail adress:</label>
    <input type="email" name="email" id="email">
  </div>
  
  <input type="submit">
</form>

2

In html, div is a blocking element. So the div that you have implemented seems to be blocking the positioning of the UI components.

In this case, chrome is interpreting it like it would need to display autocomplete after other ui elements inside the form have been rendered. You can try changing that div to a span and see if that changes the rendering.

This appears as chrome's own interpreted behavior in your case. You won't be able to change chrome's rendering behaviour, but you can turn off autocomplete in your form and instead enable your own autocomplete list through https://jqueryui.com/autocomplete/

Also, read this, the version of chrome you are using or referring to had some breaking changes. Current version is 60.0.3112.90. With web browsers, as you will already know, newest version is better.

https://github.com/jmoenig/Snap--Build-Your-Own-Blocks/issues/1707

1

I will remove the div with have the height of 150px and i will add label for the input names, try this

    <form action="/action_page.php" autocomplete="on">
      <label for="fname">First name:</label><input type="text" name="fname"><br>
      <label for="lname">Last name:</label><input type="text" name="lname"><br>
      <label for="email"> E-mail: </label><input type="email" name="email" ><br>
       <input type="submit">  
    </form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.