Заполнять Datalist из базы данных

Question

новичок в javascript и php, однако я хочу заполнить datalist из таблицы mysql, но с некоторыми трудностями соответствующие коды представлены ниже. Я могу извлекать данные из базы данных, но не могу их отображать в элементе datalist.

HTML-код

<form class="form" action="insert.php" method="post" name="access_form"> 
 

 
<ul> 
 

 
<li> 
 
<h2>Please Fill The Form</h2> 
 

 
</li> 
 

 
<li> 
 
    <label for="firstname">First Name</label> 
 
     <input name="firstname" id="keyword" type="text" placeholder="type first name (required)" required /> 
 
     <datalist id="results"> 
 
\t 
 
</datalist> 
 
</li>

это Java-код

var MIN_LENGTH = 1; 
 

 
$(document).ready(function() { 
 
\t $("#keyword").keyup(function() { 
 
\t \t var keyword = $("#keyword").val(); 
 
\t \t if (keyword.length >= MIN_LENGTH) { 
 
\t \t \t $.get("auto-complete.php", { keyword: keyword }) 
 
\t \t \t .done(function(data) { 
 
\t \t \t \t $('#results').html(''); 
 
\t \t \t \t var results = jQuery.parseJSON(data); 
 
\t \t \t \t $(results).each(function(key, value) { 
 
\t \t \t \t \t $("datalist").empty(); 
 
             $("datalist").html(data); 
 
\t \t \t \t }) 
 

 
\t \t \t  $('.item').click(function() { 
 
\t \t \t  \t var text = $(this).html(); 
 
\t \t \t  \t $('#keyword').val(text); 
 
\t \t \t  }) 
 

 
\t \t \t }); 
 
\t \t } else { 
 
\t \t \t $('#results').html(''); 
 
\t \t } 
 
\t }); 
 

 
    $("#keyword").blur(function(){ 
 
    \t \t $("#results").fadeOut(500); 
 
    \t }) 
 
     .focus(function() { \t \t 
 
    \t  $("#results").show(); 
 
    \t }); 
 

 
});

код PHP ниже

<?php 
    require('constant.php'); 
    require('database.php'); 

    if (!isset($_GET['keyword'])) { 
     die(); 
    } 

    $keyword = $_GET['keyword']; 
    $data = searchForKeyword($keyword); 
    echo json_encode($data); 
    ?> 

пожалуйста, любые предложения

Answer 1

Это выглядит как ваш $.each собирается очистить набор данных для каждого результата.

Попробуйте это вместо этого.

$("datalist").empty(); 
$(results).each(function(key, value) { 
    $("datalist").append($("<option>").innerHTML(data)); 
    }) 

Вы будете создавать новый option элемент и добавляет его к datalist элементу.