问题：

当用户在文本框中插入名称时，会填充一个空的下拉列表，但如果用户单击下拉列表或页面中的某个位置，则下拉列表中会显示电影列表！另一个问题是，如果用户在文本框中按Enter键（在他插入名称后），文本框将被清除!! 有人可以让我知道我的代码有什么问题吗？

以下是代码：

<html>
    <head>
        <link type="text/css" href="res/jquery-ui.css" rel="stylesheet" />
        <script type="text/javascript" src="res/jquery.min.js"></script>
        <script type="text/javascript" src="res/jquery-ui.min.js"></script>
        <script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"type="text/javascript"type="text/javascript"></script>
    </head>

    <body>
        <form>
            <p>
                <input type="textbox" name= "tag" id="tags" placeholder="Enter an actor/actress name here" />
            </p>
            <p>
                <select id="movieName" name="movieName[]" multiple="multiple" width="200px" size="10px" style="display:none;">
                </select>
            </p>

        <script type="text/javascript">
            $(document).ready(function () {
                $("#tags").autocomplete({
                    source: "actorsauto.php",
                    minLength: 2,
                    focus: function( event, ui ){
                        event.preventDefault(); 
                        return false;
                    },
                    select: function (event, ui){
                        $("#tags").on('autocompletechange change', function () {
                            var selectedVal = $(this).val();
                            $.post("actions.php", {q: selectedVal}, function (response){
                                console.log(response);
                                $("#movieName").html(response).show();
                            });
                        }).change();
                     }
                });
            });
        </script>
        </form>
    </body>
</html>

这是actions.php：

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

$html = "";
if(isset($_POST['q']) && !empty($_POST['q'])){
    try{ 
        include('imdbConnection.php');
        $sql = $conn->prepare("SELECT DISTINCT movieName FROM cast_movie WHERE castName = :q");
        $sql->execute(array(':q' => $_POST['q']));
        while($rows = $sql->fetch(PDO::FETCH_ASSOC)){
            $option = '<option value="' . $rows['movieName'] . '">' . $rows['movieName'] . '</option>';
            $html .= $option;
        }   
    } catch(PDOException $e){
        echo 'ERROR: ' . $e->getMessage();
    }

    echo $html; 
    exit;
}
?>

Answer 1

这一部分。

$("#tags").on('autocompletechange change', function () {
    var selectedVal = $(this).val();
    $.post("actions.php", {q: selectedVal}, function (response){
        console.log(response);                                            
        $("#movieName").html(response).show();
    });
}).change();

将对“改变”采取行动。。尝试将其更改为“keyup” 只有在元素失去焦点时才会触发更改。

编辑：你应该改变这部分..

 $("#tags").on('autocompletechange keyup', function () {
    var selectedVal = $(this).val();
    $.post("actions.php", {q: selectedVal}, function (response){
        console.log(response);                                            
        $("#movieName").html(response).show();
    });
}).keyup();

仅当我点击它时才会填充动态下拉列表

问题：

1 个答案: