Is there a way to autocomplete an input's value with the top placed option from the datalist using pure JS?

Question

Is there a way to autocomplete an input value (while the user is typing) with the top placed option suggested from the datalist by pressing enter (and do that with pure JS)?

Somehow all the information on the matter that I manage to find suggests only solutions using JQuery. I'm quite a beginner using JavaScript, so I am not familiar with the library. So, I wonder if there is any solution that can be perforemed using pure JS?

Answer 1

html does have the ability to support autocomplete, but it's very limited and leaves the options for autocomplete up to the browser. see https://www.w3schools.com/tags/att_input_autocomplete.asp . You can use a library to enhance a normal input box, or build your own. Usually the way they work is by putting a absolute positioned div under the input when it has keyboard focus. A library that does this that I'm familiar with is called jqueryui https://jqueryui.com/autocomplete/ . this does use jquery, but there are other libraries out there that don't depend on such. https://tarekraafat.github.io/autoComplete.js/#/ comes up in a quick google search. you'll have to assess it's quality.