javascript - $sql JSON 正确加载，但即时搜索失败。仅限 JavaScript。

Question

我有这个程序，我一直在努力解决。当我使用此代码加载页面时，它工作得非常完美。我向其中添加了即时搜索输入，每次我尝试即时搜索时都会失败。它给了我 unexpected end of input input , Unexpected token S ，或Unexpected token <
这是完整的代码，注释掉了我试图找出哪里出错的返回数据。

  html Inputs:
<form>
<div class="left group">Search Title: <input type="text" name="title" id="title" class="css-input" onkeyup="searchdb(this.id);" />|</div>
<div class="left group">Search Stars: <input type="text" name="stars" id="stars" class="css-input" onkeyup="searchdb(this.id);" />|</div>
<div class="left group">Search View Key: <input type="text" name="vks" id="vks" class="css-input"onkeyup="searchdb(this.id);" />|</div>
<br/><br/>
<div class="line1"></div>
<br/>

</form>

完整的 JavaScript:

var ttl='ttl';
var str='str';
function listedLoad(ttl,str){
    var vid_gen = '';
    var x = ttl;
    var y = str;
    var data = 'pass='+x+'&search='+y;
    var dir = 'add/video_php/';
    var video_select = _("list");
    var create = new XMLHttpRequest();
            create.open("POST", "php/list_view.php", true);
            create.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            create.onreadystatechange = function() {
                if(create.readyState == 4 && create.status == 200) {
                    //console.log(create.responseText);         //
                    //_("list").innerHTML = create.responseText;// --> All data returns correct.
                    //return false;                             //
                    var d = JSON.parse(create.responseText);
                        for(var o in d){
                        var div = document.createElement('div');
                         div.className = 'item-group';
                        var item1 = document.createElement('div');
                         item1.className = 'item-id left';
                          item1.innerHTML = 'Id: '+d[o].id;
                        var item2 = document.createElement('div');
                         item2.className = 'item-uid left';
                          item2.innerHTML = 'Uid: '+d[o].uid;
                        var item3 = document.createElement('div');
                         item3.className = 'item-title';
                          item3.innerHTML = 'Title: '+d[o].title;
                        var item4 = document.createElement('div');
                         item4.className = 'item-dur right';
                          item4.innerHTML = 'Dur: '+d[o].dur;
                        var item5 = document.createElement('div');
                         item5.className = 'item-year';
                          item5.innerHTML = 'Year: '+d[o].year;
                        var item6 = document.createElement('div');
                         item6.className = 'item-stars';
                          item6.innerHTML = 'Stars: '+d[o].stars;
                        var item7 = document.createElement('div');
                         item7.className = 'item-genere';
                          item7.innerHTML = 'Genere: '+d[o].genere;
                        var item8 = document.createElement('div');
                         item8.className = 'item-desc';
                          item8.innerHTML = 'Desc: '+d[o].desc;
                        var item9 = document.createElement('div');
                         item9.className = 'item-loc';
                          item9.innerHTML = 'Loc: '+d[o].loc;
                        var item10 = document.createElement('div');
                         item10.className = 'item-udate';
                          item10.innerHTML = 'Udate: '+d[o].udate;
                        var item11 = document.createElement('div');
                         item11.className = 'item-vdate';
                          item11.innerHTML = 'Vdate: '+d[o].vdate;
                        var item12 = document.createElement('div');
                         item12.className = 'item-vcount left';
                          item12.innerHTML = 'Vcount: '+d[o].vcount;
                        var item13 = document.createElement('div');
                         item13.className = 'item-vrate left';
                          item13.innerHTML = 'Vrate: '+d[o].vrate;
                        _("list").appendChild(div);
                        div.appendChild(item9);
                        div.appendChild(item1);
                        div.appendChild(item2);
                        div.appendChild(item12);
                        div.appendChild(item13);
                        div.appendChild(item3);

                        item3.appendChild(item4);
                        item3.appendChild(item5);
                        div.appendChild(item6);
                        div.appendChild(item7);
                        div.appendChild(item8);
                        div.appendChild(item10);
                        div.appendChild(item11);
                        }
                    }
        }
    create.send(data);
    }
function searchdb(x){
if(x == 'title'){title = _('title').value;ttl='title';str=title;}
else if(x == 'stars'){stars = _('stars').value;ttl='stars';str=stars;}
else if(x == 'vks'){vks = _('vks').value;ttl='vks';str=vks;}
console.log(ttl+' '+str); // --> all variables return correctly.
listedLoad(ttl,str);
}

PHP:

<?php
header("Content-Type: application/json");
error_reporting(E_ALL);
include_once '../../admin/admin-temp-php/db_conn.php';
include_once '../../add/video_php/vid_functions.php';
//echo $_POST['pass'];echo $_POST['search'];exit();   --> Here i echoed data back to the page. Comes in correct.
if($_POST['pass'] == 'undefined'){  //
    $_POST['search']='';            //
    $searchLoc = '*';               //
    $srh = 'videos';                //  --> On page load, this works perfect. No issues here
    $where = '';                    //
    $search = 'title';              //
    }                               //
//////////////////////////////////////////////////
if($_POST['pass'] == 'title'){                  //
    $searchLoc = '*';                           //
    $srh = 'videos';                            //
    $where = '';                                //
    $search = 'title';                          //
}                                               //
if($_POST['pass'] == 'stars'){                  //
    $find=$_POST["search"];                     //
    $searchLoc = '*';                           //
    $srh = 'videos';                            //
    $where = " WHERE stars LIKE '\%$find\%' ";  //  -->this is where i think my problem lays
    $search = 'stars';                          //
}                                               //
if($_POST['pass'] == 'vks'){                    //
    $find=$_POST["search"];                     //
    $searchLoc = '*';                           //
    $srh = 'videos';                            //
    $where = " WHERE loc LIKE '\%$find\%' ";    //
    $search = 'loc';                            //
}                                               //
//////////////////////////////////////////////////
$sql = "SELECT ".$searchLoc." FROM ".$srh.$where." ORDER BY ".$search." ASC"; 
//echo $sql;exit();// <-- the $sql syntax looks good here in all inputs
$query = mysqli_query($db_conn, $sql) or die (mysqli_error()); 
$data = '{';
$i = 0;
if($query){
while ($row = mysqli_fetch_array($query)) { 
        $id             = $row['id'];
        $uid            = $row['uid'];
        $title          = $row['title'];
        $dur            = $row['dur'];
        $year           =$row['year'];
        $stars          = $row['stars'];
        $genere         = $row['genere'];
        $description    = $row['description'];
        $loc            = $row['loc'];
        $cover          = $row['cover'];
        $udate          = $row['udate'];
        $v_date         = $row['v_date'];
        $v_count        = $row['v_count'];
        $v_rate         = $row['v_rate'];
        $ip             = $row['ip'];
    $explode = explode('/',$loc);
    $loc = explode('.',$explode[2]);
    $loc = $loc[0];

    $data .= '"mov'.$i.'":{ "id":"'.$id.'","uid":"'.$uid.'", "title":"'.$title.'", "dur":"'.$dur.'", "year":"'.$year.'", "stars":"'.$stars.'", "genere":"'.$genere.'", "desc":"'.$description.'", "loc":"'.$loc.'", "udate":"'.$udate.'", "vdate":"'.$v_date.'", "vcount":"'.$v_count.'", "vrate":"'.$v_rate.'" },';
$i++;   
}
$data = chop($data,',');
$data .= '}';
echo $data;

}else{
    echo 'DATA FAILED TO LOAD';
    exit();
}
mysqli_free_result($query);
?>

我一直在尝试很多不同的方法。我相信我的问题出在 $sql在 PHP if 语句的开头。第一个 block 工作完美，当我尝试即时搜索时，它会中断并抛出错误。
我在这里编写了同样的程序，没有 JSON，
javascript returns blank line at front of result
我将其重新编程为adeneo在那篇文章中建议。在我更改代码后，我的页面按预期加载...解决了我在该部分的问题。奇怪的是，它被否决了 3 次:/。对 JQuery 不感兴趣...不太了解

Answer 1

好吧......感觉相当迟钝......哈哈。该代码完美运行。我之前忘记了一件简单的事情
var d = JSON.parse(create.responseText);
我没有清除数据的 div...我的搜索连接到列表的末尾，靠近页面底部的很远的地方。我在上面的行之前添加了这段代码...
_("list").innerHTML = '';
现在，当我使用搜索框时，返回数据会被清除，只留下我要查找的内容。最简单的事情会因沮丧而被忽视:/