根据自动填充文本框中插入的值动态添加下拉列表

Question

Please someone help, I am really stuck on this for 2 days :|

I have a PHP form and I would like to enable user select movies by title, or by actors. So, I was thinking about a dropdown menu by these values (moviebyTitle, moviebyActor). For selecting movies by title, I used jQuery auto-complete which get movie titles from my DB and it works fine.

This is my code:

<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>

and here is the 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>

EDIT:

and this is the actions.php: (please kindly see also javascript part above)

<?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;
}
?>

My question:

I just wonder how can I add a drop down list based on the value user has typed in the textbox. For example, if user wrote "Tom Cruise" in the auto-complete textbox, a dropdown will be added that shows movies in which "Tom Cruise" has played. (I make a COMMENT in the JavaScript code where I had problem)

I really searched a lot, but all samples where to dynamically populate some dropdown (like this one, or adding a textbox based on value selected in dropdown...

Please help, I really don't mean someone write the code for me, I just want to find any sample or some way that I can learn how to do it.

Thanks,

Answer 1

The real question is, what's the point of the second drop down box. Why dont you just display all of the movies in a "table" once they've selected the actor.

I'd suggest a unified "Search" box, and on the PHP side, querying both your movies and actors, displaying all results that way?

If they choose a autoComplete value that is of type actor, display all the actor's movies. If they select an autoComplete value that is of type "movie" - display all the movies.

Effectivly - you're eliminating the By Actor or By Movie radio in favor of a better search bar.