0

そのため、単純なオートコンプリート フォームを作成しようとしていますが、プログラムをテストしようとするとエラーが発生し続けます。プログラムをテストしようとすると、コンソールが [11:25:26.267] SyntaxError: JSON.parse: unexpected character @ /search.php:22 という行を吐き出します。私の構文は問題ないと確信していますが、間違っている可能性があります。ありとあらゆる助けをいただければ幸いです。力になれなくても、時間をかけて読んだり答えたりしてくれた人に感謝します!

for (var i = 0; i < response.length; i++)

私の完全なコードは次のとおりです。

編集：jsonをエコーするページが追加されました。console.log(req.responsetext) を実行すると、[11:38:04.967] ReferenceError: req is not defined が表示されます。しかし、私はreqをウィンドウのロード時に新しいxmlリクエストとして定義しているので、ちょっと困惑しています。

    <!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Auto Complete</title>
</head>

<body>
    <script>
        window.onload = function () {
            var req = new XMLHttpRequest();     //the HTTP request which will invoke the query
            var input = document.getElementById('search');      //where to grab the search from
            var output = document.getElementById('results');    //where to display the sugestions

            input.oninput = getSuggestions;

            function getSuggestions() {
                req.onreadystatechange = function () {
                    output.innerHTML = "";  //CLEAR the previous results!! only once the server can process new ones though
                    if (this.readyState == 4 && input.value != "") {
                        var response = JSON.parse('(' + req.responseText + ')');
                        for (var i = 0; i < response.length; i++)
                            addSuggestion(response[i].terms);
                    }
                }               
                req.open('GET', 'getterms.php?query=' + input.value, true); //GET request to getterms.php?=
                req.send(null);
            }

            addSuggestion = function (suggestion) {
                var div = document.createElement('div');
                var p = document.createElement('p');
                div.classList.add('suggestion');        //suggestion[x]...
                p.textContent = suggestion;             
                div.appendChild(p);
                output.appendChild(div);

                div.onclick = function() {
                    input.value = p.innerHTML;  //set the search box
                    getSuggestions();           //GET new suggesions
                }


            }
        }
    </script>

    <input type='text' id='search' name='search' autofocus='autofocus'>
    <div id='results'></div>
</body>
</html>

編集これはjsonをエコーする私のphpページです。

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

if (!isset($_GET['query']) || empty($_GET['query']))
    header('HTTP/1.0 400 Bad Request', true, 400);
else {


    $db = new PDO(
    my database
    );


    $search_query = $db->prepare("
        SELECT * FROM `words` WHERE `word` LIKE :keywords LIMIT 5
    ");

    $params = array(
        ':keywords' => $_GET['query'] . '%',
    );

    $search_query->execute($params);
    $results = $search_query->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($results);
}
?>
4

1 に答える 1

1

JSON.parse の ( と ) を削除してください。

JSON.parse('(' + req.responseText + ')')

する必要があります

JSON.parse( req.responseText );

うまくいけば、responseText は有効な JSON です

于 2013-05-07T18:35:16.333 に答える