Smilar to datalist - html

Question

I'am searching something similar to datalist in html. While I'm typing something in html input it shows me similar titles in database. When i type something more, ajax show me better matching titles to my text. And i have this ajax script but my question is here: How can I present this titles under the input text?
I saw on google it's only ul and li tags, and it's all ?
google search example
But on w3schools example we can see propably better solution.
Which one is better ? Or if you know other techniques please tell me about it. Don't know which one to use in my search tool.

Answer 1

I think i find the solution by the comment with helpful link, don't remember who is it because he delete his comment.
By this link i started to seraching datalist and found article:
blog link
And here we have some phrases about datalist and very useful example:
<div id="page-wrapper">
<h1>Datalist Element Demo</h1>
<label for="default">Pick a programming language</label>
<input type="text" id="default" list="languages" placeholder="e.g. JavaScript">
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby">
<option value="PHP">
<option value="Go">
<option value="Erlang">
<option value="Python">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
<label for="ajax">Pick an HTML Element (options loaded using AJAX)</label>
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>
</div>
<script>
// Get the <datalist> and <input> elements.
var dataList = document.getElementById('json-datalist');
var input = document.getElementById('ajax');
// Create a new XMLHttpRequest.
var request = new XMLHttpRequest();
// Handle state changes for the request.
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
if (request.status === 200) {
// Parse the JSON
var jsonOptions = JSON.parse(request.responseText);
// Loop over the JSON array.
jsonOptions.forEach(function(item) {
// Create a new <option> element.
var option = document.createElement('option');
// Set the value using the item in the JSON array.
option.value = item;
// Add the <option> element to the <datalist>.
dataList.appendChild(option);
});
// Update the placeholder text.
input.placeholder = "e.g. datalist";
} else {
// An error occured :(
input.placeholder = "Couldn't load datalist options :(";
}
}
};
// Update the placeholder text.
input.placeholder = "Loading options...";
// Set up and make the request.
request.open('GET', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json', true);
request.send();
</script>
I get this from codepen link in article. Pen created by Matt West.