javascript - 从数据库填充数据列表

Question

我是 javascript 和 php 的新手，但是我想从 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">
	
</datalist>
</li>

这是 JavaScript 代码

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();
    	});

});

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 元素。