Question

我正在尝试将图像与电影标题集成到我的自动完成文本框中。为此，我在mysql数据库的表“film_Posters”中抓取了电影标题列表及其海报链接（链接到电影图像）。

问题：

为什么我会变空？很抱歉，如果这个问题被多次询问，但我真的无法修复它...... (Please see the image below):

这是我的php文件：

<?php
if (isset($_GET['term'])){
    $arr = array();
    try {
        $conn=new PDO('mysql:dbname=imdb;host=localhost', 'user', 'pass');
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare('SELECT DISTINCT movieName, posterLink FROM film_Posters WHERE movieName LIKE :term limit 0, 10');
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

        while($row = $stmt->fetchAll(PDO::FETCH_ASSOC)) {
                  $arr[]=array('value'=>$row['movieName'], 
                               'label'=>$row['movieName'],
                               'icon'=>$row['posterLink']);                    
         } 
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }

    echo json_encode($arr);
}
?>

这是我的html / javascript文件：

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<fieldset id = "q27"> <legend class="Q27"></legend>
<label class="question"> What are your favorite movies?<span>*</span></label>
<div class="fieldset content"> 

<div id="m_scents">
<label style="margin-bottom:10px;" for="m_scnts">
<input type="text" id="m_scnt" size="20" name="q27[]"
value="" placeholder="Enter text" />
</label>
</div>
</div>
</fieldset>   

<script type = text/javascript>
(function($){      
  var $title = $('#m_scnt');

  $(function () {
    var arr = <?php echo json_encode($rows); ?>;
  });

  $title.autocomplete({
    minLength: 2,
    source: testfilmsauto.php,
    focus: function( event, ui ) {
      $title.val( ui.item.label );
      return false;
    }
  });

  $title.data( "ui-autocomplete" )._renderItem = function( ul, item ) {

    var $li = $('<li>'),
        $img = $('<img>');  

    $img.attr({    //I AM NOT SURE ABOUT THIS PART 
      src: <?php echo $rows['posterLink']?>,
      alt: <?php echo $rows['movieName']?>
    });   
    $li.attr('data-value', item.label);
    $li.append('<a href="#">');
    $li.find('a').append($img).append(item.label);       
    return $li.appendTo(ul);
  };     
})(jQuery);    
</script>    
</body>
</html>

UPDATE：

这是更新的php文件，其中包含@meda和@marc的答案：

<?php
if (isset($_GET['term'])){
    try {
        $conn=new PDO('mysql:dbname=imdb;host=localhost', 'user', 'pass');
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare('SELECT DISTINCT movieName, posterLink FROM film_Posters WHERE movieName LIKE :term limit 0, 10');
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

        $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
        } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }  
    echo json_encode($rows);
}
?>

现在，我不再看到null消息了，但是自动完成根本不起作用..我认为这个问题与javascript部分有关...我非常感谢任何帮助。

Answer 1

你的取错循环错误：

    while($row = $stmt->fetchAll(PDO::FETCH_ASSOC)) {
                        ^^^^^^^^

fetchAll（）将行的 ALL 作为数组数组返回，例如

$rows = array(
    0 => array( contents of row #1)
    1 => array( contents of row #2)

这意味着while()循环完全没有意义。 fetchAll无论如何都只能工作，所以循环没有意义。你所需要的只是

$rows = $stmt->fetchAll(PDO::FETCH_ASSOC)
echo json_encode($rows);

然后在您的客户端javascript：

 text_to_display = data_from_server[0].movieName;

Answer 2

以下是pdo代码所需的全部内容：

<强> PHP

if (isset($_GET['term'])){
    $rows = array();
    try {
        $conn=new PDO('mysql:dbname=imdb;host=localhost', 'user', 'pass');
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $sql = 'SELECT DISTINCT movieName, posterLink 
                FROM film_Posters 
                WHERE movieName LIKE :term limit 0, 10';
        $stmt = $conn->prepare($sql);
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));
        $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }

    echo json_encode($rows);
}

至于javascript，我没有看到任何请求。您应该执行POST或GET ajax请求，这是空的

<强>的jQuery ：

(function($){

  var $movie = $('#m_scnt');
  var movies = "";

    $.ajax({
      dataType: "json",
      url: 'auto.php',
      success: function(response){
        movies = response;
        alert(JSON.stringify(response));
        $movie.autocomplete({
        minLength: 0,
        source: movies,
        focus: function( event, ui ) {
          $movie.val( ui.item.label );
          return false;
        }
        });

        $movie.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
            var $li = $('<li>'),
                $img = $('<img>');


            $img.attr({
              src: 'https://path/to/your/images/' + item.posterLink,
              alt: item.label
            });

            $li.attr('data-value', item.label);
            $li.append('<a href="#">');
            $li.find('a').append($img).append(item.label);    

            return $li.appendTo(ul);
        };
    }
    });  
})(jQuery);

来自mysql的json-encode返回null

问题：

UPDATE：

2 个答案: