根据自动完成文本框中插入的值动态添加dropdpwn

dynamically add a dropdpwn based on value inserted in autocomplete textbox

本文关键字：插入 动态 dropdpwn 添加 文本      更新时间：2023-09-26

请有人帮忙，我真的被困了两天：|

我有一个PHP表单，我想让用户按标题或演员选择电影。所以，我考虑了一个由这些值（moviebyTitle，moviebyActor）组成的下拉菜单。对于按标题选择电影，我使用了jQuery自动完成，它从我的DB中获取电影标题，效果很好。

这是我的代码：

<select id="selectType" name="source">
  <option value="">MoviesBy</option>
  <option value="byTitle">byTitle</option>
  <option value="byActor">byActor</option>
</select>
<input type="textbox" name= "tag" id="tags">
<div id="byActor" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
<select name="films[]" multiple="multiple" width="200px" size="10px">
  <?php
   include('moviedropdown.php');
  ?>
 </select>

这是javascript：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#tags").autocomplete({
    source: "actorsauto.php",
    minLength: 2
}); 
 $("#selectType").change(function () {
     if ($(this).val() == "byTitle")
        $("#tags").autocomplete("option", "source", "filmsauto.php");
      else 
      if ($(this).val() == "byActor")
        $("#tags").autocomplete({
         source: "actorsauto.php",
         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, q2: $("#selectType").val()}, function (response){
            // response variable above will contain the option tags. Simply put in the dropdown.
             $("#movieImdbId").html(response);
          });
      }
    });
  }
});
});                 
</script>

编辑：

这是actions.php：（请参阅上面的javascript部分）

<?php
if(isset($_GET['q']) && !empty($_GET['q']) && isset($_GET['q2']) && !empty($_GET['q2']) ){
   // Here goes the cleaning code. Never use the variables received from $_GET and $_POST directly before processing it for malicious code.
$q = $_GET['q'];
$q2 = $_GET['q2'];
//$sql = fetchResults($q, $q2); // Some function which will run a database query and return some records in either object collection or arrays etc.
//I added this part to fetch data from DB
include('imdbConnection.php');
$sql = $conn->prepare('SELECT DISTINCT movieImdbId FROM movie_roleNames WHERE castName = :q');
$sql->execute(array(':q' => $q));
$html = "";
while($row = $sql->fetchAll(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;
}
?>

我的问题：

我只是想知道如何根据用户在文本框中键入的值添加下拉列表。例如，如果用户在自动完成文本框中写下"Tom Cruise"，则会添加一个下拉列表，显示播放过《Tom Cruise》的电影。（我在JavaScript代码中评论了我遇到问题的地方）

我真的搜索了很多，但所有的样本都是动态填充一些下拉列表的（比如这个，或者根据下拉列表中选择的值添加一个文本框…

请帮忙，我真的不是说有人帮我写代码，我只是想找到任何样本或某种方法，我可以学习如何做到这一点。

谢谢，

您应该有如下内容。

您实际需要的是，当您在自动完成框中键入并选择某个内容时，您需要保留该值以供以后使用。之后，您需要使用ajax调用调用服务器（php脚本），并从自动完成框中发送该值以及下拉框中的值（仅在需要时）。php脚本需要在循环中生成一堆类似以下内容的内容，并将整个html保存在一个变量中。

<option value='v1'>Value1</option><option value='v2'>Value2</option>

之后，将其发送回调用ajax脚本，然后您需要将其作为要填充的下拉列表中的内容。

下面是一些关于如何完成javascript部分的示例代码。

<select id="filmsdd" name="films[]" multiple="multiple" width="200px" size="10px">
 </select>
<script>
    $(document).ready(function () {
        $("#tags").autocomplete({
          source: "actorsauto.php",
          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, q2: $("#selectType").val()}, function (response){
                // response variable above will contain the option tags. Simply put in the dropdown.
                $("#filmsdd").html(response);
              });
          }
        });
    });
<script>

编辑：

path/to/somefile.php可以是与其他网站文件一起存储在您的目录中的任何文件。让我们称之为actions.php（我已经更新了$.post-ajax调用）

当$.post运行时，它将向actions.php发送一个请求以及两个变量q和q2。这些变量名可以是任何名称。

q包含从自动完成框中选择的值。q2包含从下拉列表中选择的类型。

在actions.php中，您最终会得到这样的结果。

if(isset($_GET['q']) && !empty($_GET['q']) && isset($_GET['q2']) && !empty($_GET['q2']) ){
   // Here goes the cleaning code. Never use the variables received from $_GET and $_POST directly before processing it for malicious code.
$q = $_GET['q'];
$q2 = $_GET['q2'];
$sql = fetchResuls($q, $q2); // Some function which will run a database query and return some records in either object collection or arrays etc.
// Initialize a variable that you will send back to your ajax call, its still waiting for this script to be completed.
$html = "";
// Assuming your function returned a list of objects. Loop through the records.
while($row = mysql_fetch_object($sql)){
   $option = '<option value="' . $row->property_id . '">' . $row->property_name . '</option>';
$html .= $option;
}
echo $html; // <-- this $html will end up receiving inside that `response` variable in the `$.post` ajax call.
exit;
}

我希望这能有所帮助。

真正的问题是，第二个下拉框有什么意义。既然他们已经选定了演员，你为什么不把所有的电影都显示在一张"表格"里呢。

我建议使用一个统一的"搜索"框，在PHP方面，同时查询电影和演员，以这种方式显示所有结果？

如果他们选择类型为actor的autoComplete值，则显示该actor的所有影片。如果他们选择类型为"movie"的autoComplete值，则显示所有电影。

有效地，你取消了"按演员"或"按电影"广播，而选择了一个更好的搜索栏。

相关文章：