Question

我是javascript和php的新手，但是我想从mysql表中填充一个datalist但是有一些困难，相关的代码如下所示。我能够从数据库中获取数据但不能在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元素。

从数据库填充Datalist

1 个答案: