类似于数据列表

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.