ajaxを使用した検索フォーム

Question

option valueにて未選択を選択した際にDB内の内容を全て表示したいのですが、うまくいきません。

現在ajaxを利用した検索フォームを実装しようとしております。
select option でPHPなどを選択した場合それに準じた内容をデータベースから引用できるのですが、未選択を選んだ際にデータベースの内容を全て表示したいにも関わらず、内容が前回選択した内容のままになってしまいます。
コンソールにはUncaught TypeError: Cannot read property 'length' of nullと表記が出てしまっております。
どのような記述をすればいいのかヒントを頂ければと思います。

記述内容 index_search.php

<?php 
require('../dbconnect.php');
if(isset($_GET['tag'])){
    $tag = $_GET['tag'];
    $sql = "SELECT title , id FROM posts WHERE tag = :tag ";
    $sth = $pdo -> prepare($sql);
    $sth -> bindValue(':tag', $tag, PDO::PARAM_STR);
    $sth -> execute();
    while($row = $sth->fetch(PDO::FETCH_ASSOC)){
    $productList[] = array(
         'id'    => $row['id'],
        'title'  => $row['title']
        );
     }
    echo json_encode($productList);
}else{
    echo [];
 }

?>

記述内容 ajax.js

$(function(){
      $('#tagSearch').change(function(){
        $.ajax({  
            url:'index_search.php',
            type: 'GET',

            dataType: 'json',
            data : {
                tag : $('[name="tag"]').val()
            }
        }).done(function(data){
            /* 通信成功時 */
           var html_response = '<ul>';
            $.each(data, function(key, value){
                html_response += '<li>' + value.id +  value.title + '</li>';
            });
            html_response += '</ul>';
            $('.result').html(html_response); 
           
        }).fail(function(data){
            /* 通信失敗時 */
            alert('通信失敗！');
                    
        });
    });
}); 

記述内容　index.php

<select name="tag" id="tagSearch">
    <option value="PHP">PHP</option>
    <option value="CSS">CSS</option>
    <option value="HTML">HTML</option>
    <option value="DB">DB</option>
    <option value="その他">その他</option>
</select>
<div class="result">内容表示</div>

Comments

[m.ts10806]

うまくできませんとのことですが、そもそも現状だと何も書かれていません。
どういう実装をしてどういう問題が起きたのでしょう。
単純に考えるとパラメータの有無でwhere句を構成すればよいだけに見えます。SQLもPHPからすれば文字列なので、その文字列に入れるか入れないかだけです。

[ryusuke.suzuki]

ご回答ありがとうございます。
現状select option でPHPなどを選択した場合それに準じた内容をデータベースから引用できるのですが、未選択を選んだ際にデータベースの内容を全て表示したいにも関わらず、内容が前回選択した内容のままになってしまいます。
コンソールにはUncaught TypeError: Cannot read property 'length' of nullと表記が出てしまっております。

[m.ts10806]

質問は編集できます。
failの引数にエラー情報が入ってるはずなので参照してみては。
https://api.jquery.com/jquery.ajax/
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

Answer 1

未選択のときすべて表示なら

$tag=filter_input(INPUT_GET,'tag');

$sql = "SELECT title , id FROM posts WHERE 1 ";
$sth = $pdo -> prepare($sql);
if(!is_null($tag)){
  $sql .= "and  tag = :tag ";
  $sth -> bindValue(':tag', $tag, PDO::PARAM_STR);
}
$sth -> execute();