Smilar to datalist

Question

Я искал что-то похожее на datalist в html. Пока я набираю что-то в входе html, он показывает мне похожие заголовки в базе данных. Когда я набираю что-то большее, ajax покажу мне лучшие совпадения с заголовками в моем тексте. И у меня есть этот сценарий ajax, но мой вопрос здесь: Как я могу представить эти заголовки под текстом ввода?

Я видел на google это только теги ul и li, и все? google search example

Но на w3schools example мы можем видеть лучшее решение.

Какой из них лучше? Или, если вы знаете другие методы, расскажите мне об этом. Не знаю, какой из них использовать в моем инструменте поиска.

Answer 1

Я думаю, что я нашел решение по комментариям с полезной ссылкой, не помню, кто это, потому что он удаляет свой комментарий.

По этой ссылке я начал seraching DataList и нашел статью: blog link

И здесь у нас есть несколько фраз о DataList и очень полезный пример:

<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 ссылки в статье , Ручка, созданная Мэттом Уэстом.