Is there any way to access browser form field suggestions from JavaScript?

Answer 08/31/2018 Developer FAQ 1

Is there any way to access the autocomplete suggestions that appear under HTML input fields in some browsers (representing previously submitted data)? Is this only available to the browser?

I ask as I want to make my own autocomplete implementation in javascript, but I want to intermingle my own suggestions with the users previous searches. A bit like how youtube does (but youtube stores all the data obviously, and it is tied to a login, there are no accounts on my website and never will be).

I was wondering more if there was a way to do it with the data stored in the users browser rather than storing all the data on my server. Is there is a way to grab the data the browser uses to present previous input to a user?

Answer1:

Is the data that appears in html input fields representing previously submitted data only available to the browser?

Yes - until it appears in the DOM.

Is there is a way to grab the data the browser uses to present previous input to a user?

It's a browser-specific feature, and you can't access the data [history] directly (Where do browsers save/store auto fill data). You only can disable storing anything.

I ask as I want to make my own autocomplete implementation in javascript, but I want to intermingle my own suggestions with the users previous searches. I was wondering more if there was a way to do it with the data stored in the users browser rather than storing all the data on my server.

Especially if you want to utilize all previous searches, the browser's autofill doesn't help you anyway. But yes, you can store them in the browser (on the client side) manually: Use DOM Storage, like localStorage. Though I would recommend sessionStorage only, you might run into privacy issues otherwise if everybody using a browser could see the search terms of previous users…

Answer2:

You can use jstorage. Jstorage lets you store up to 5Mb of data on the client side.

<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
<script> 
/* $.jStorage is now available */ 

// store some data
$.jStorage.set('yourkey', 'whatever value');

// get the data back
value = $.jStorage.get('yourkey');

</script>