How to turn off HTML input form field suggestions?

By suggestions, I mean the drop down menu appear when you start typing, and it's suggestions are based on what you've typed before:

For example, when I type 'a' in title field, it will give me a ton of suggestions which is pretty annoying.

How can this be turned off?

What you need is to disable HTML autocomplete Attribute.

Setting autocomplete="off" here has two effects:

It stops the browser from saving field data for later autocompletion on similar forms though heuristics that vary by browser. It stops the browser from caching form data in session history. When form data is cached in session history, the information filled in by the user will be visible after the user has submitted the form and clicked on the Back button to go back to the original form page.

Read more on MDN Network

Here's an example how to do it.

<form action="#" autocomplete="off">
  First name:<input type="text" name="fname"><br> 
  Last name: <input type="text" name="lname"><br> 
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

If it's on React framework then use as follows:

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autoComplete="off"
    {...fields}/>

Link to react docs

Update 1

Here's an update to fix some browsers skipping "autocomplete=off" flag.

<form action="#" autocomplete="off">
  First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
  <input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
  <input type="submit">
</form>

Update 2

Still working on Chrome Version 119.0.6045.200 (Official Build) (64-bit) / Tested on 12/12/2023.