根据插入到文本框中的值填充动态下拉列表答案

【问题标题】：Populate a dynamic dropdown based on value inserted in the text-box根据插入到文本框中的值填充动态下拉列表
【发布时间】：2014-10-22 15:02:05
【问题描述】：

请人帮忙，我真的要疯了！。

我有一个包含一些问题的 PHP 表单，其中一个问题是“您最喜欢哪些电影？”为此，我使用了 jQuery 自动完成功能，效果很好！但是，用户可能会忘记电影的名称，但记得在那部电影中扮演的演员。所以，我想让用户在自动完成文本框中输入演员/女演员姓名（例如，“汤姆克鲁斯”）并根据插入的演员姓名，应该添加一个动态下拉菜单，其中包含演员的电影列表（例如汤姆克鲁斯）曾在其中演奏过。

这是我试过但没用的:((

<html>
<?php
print_r($_POST);
?> 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>
</head>

<body>

<input type="textbox" name= "tag" id="tags">
<select id="movieImdbId" name="movieImdbId[]" multiple="multiple" width="200px" size="10px" style=display:none;>
</select>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

<script type="text/javascript">
$(document).ready(function () {
                      $("#tags").autocomplete({
                        source: "actorsauto.php",  //php file which fetch actors name from DB
                        minLength: 2,
                        select: function (event, ui){
                        var selectedVal = $(this).val(); //this will be your selected value from autocomplete
                 // Here goes your ajax call.      
                       $.post("actions.php", {q: selectedVal}, function (response){
                // response variable above will contain the option tags.            
                       $("#movieImdbId").html(response).show();
              });
           }
          });     
       });                     
</script>    
</body>
</html>

这是actions.php：

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

if(isset($_GET['q']) && !empty($_GET['q'])){
 $q = $_GET['q'];

include('Connection.php');  //connection to the DB
$sql = $conn->prepare("SELECT DISTINCT movieImdbId FROM movie_roleNames WHERE castName = :q");
$sql->execute(array(':q' => $q));
$html = "";

while($row = $sql->fetch(PDO::FETCH_OBJ)){
  $option = '<option value="' . $row->movieImdbId . '">' . $row->movieImdbId . '</option>';
  $html .= $option;
}
echo $html; // <-- this $html will end up receiving inside that `response` variable in the `$.post` ajax call.
exit;
}
?>

问题：为什么当用户在文本框中插入演员姓名时，下拉菜单已填充但为空？

【问题讨论】：

PHP返回的数据是否成功？
@tymeJV: 我不知道如何测试，我把print_r($_POST); 放在html/js 文件的开头，我在本地主机中看到的是数组（）......所以我认为它返回一个空数组...

标签： javascript php jquery ajax auto-populate

【解决方案1】：

在您的 ajax 调用中，您发送一个 POST 请求，并尝试在您的 php 中获取带有 $_GET 的参数。

$.post("actions.php", {q: selectedVal}, function (response){
    // response variable above will contain the option tags.            
   $("#movieImdbId").html(response).show();
});

将$.post 方法更改为$.get。

或

if(isset($_GET['q']) && !empty($_GET['q'])){
    $q = $_GET['q'];
}

将$_GET 更改为$_POST。

【讨论】：

感谢您的回答，但它并没有改变结果.. :(
在您的actions.php ajax 调用的回调中，尝试console.log 和response 看看它是什么
这样的：... console.log(response); $("#movieImdbId").html(response).show(); ...
谢谢，我做到了，没有任何改变：(