类似于 数据列表

Question

我正在搜索类似于 html 中的 datalist 的内容。当我在 html 输入中输入内容时，它会在数据库中显示类似的标题。当我输入更多内容时，ajax 会向我显示与我的文本更好匹配的标题。我有这个 ajax 脚本，但我的问题在这里：如何在输入文本下显示这些标题？

我在 google 上看到只有 ul 和 li 标签，这就是全部？ google search example

但是在 w3schools example 我们可以看到更好的解决方案。

哪个更好？或者，如果您知道其他技术，请告诉我。不知道在我的搜索工具中使用哪一个。

Answer 1

我想我通过有用链接的评论找到了解决方案，不记得是谁，因为他删除了他的评论。

通过此链接，我开始搜索数据列表并找到文章： blog link

这里我们有一些关于数据列表的短语和非常有用的例子：

<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>

我从文章中的 codepen 链接得到这个。马特·韦斯特创作的钢笔。