从数据库填充Datalist

Question

am new to javascript and php however i want to populate a datalist from mysql table but have some difficulties the relevant codes are presented below.I am able to fetch data from the database but not able to display them in the datalist element.

the HTML code

<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">
    
</datalist>
</li>

this is the javascript code

var MIN_LENGTH = 1;

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

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

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

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

});

the php code is below

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

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

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

please any suggestions

</div>

Answer 1

It looks like your $.each is going to empty the dataset for every result.

Try this instead.

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

You'll be creating a new option element and appending it to the datalist element.