使用 AJAX 进行实时搜索答案

【问题标题】：Live search with AJAX使用 AJAX 进行实时搜索
【发布时间】：2015-04-29 02:13:55
【问题描述】：

我需要建立一个实时搜索，但我不太了解 ajax 和 javascript，但我了解 html、css 和 php。有人能告诉我我做错了什么吗？

<script>
    function liveSearch(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        }
        else { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                }
            }

            xmlhttp.open("GET", "getuser.php?q=" + str, true);
            xmlhttp.send();
        }
    }
</script>

<input type="text" onkeypress="liveSearch(this.name)" name="searchWord"/>

<?php
    $dbhost = 'localhost';
    $dbuser = 'root';
    $dbpass = '';
    $dbname = 'ezcart';
    $conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

    if ($conn->connect_error) {
        die('Could not connect to the database: ' . $conn->connect_error);
    }

    $word = $_GET['q'];
    $sql= "SELECT prodNam FROM product WHERE prodNam LIKE '$q' ORDER BY prodNam ASC";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo "<div><p>".$row[prodNam]."</p></div>";
        }
    }
    $conn->close();
?>

【问题讨论】：

就我个人而言，我会使用 Jquery 和 $.get 或 $.post 函数，因为它们正是为这类事情而设计的，而且更容易（在我看来）更清晰。
我不能使用 jquery，这是一个单元的课程。
你有onkeypress="liveSearch(this.name)"，它将发送searchWord。我想你希望onkeypress="liveSearch(this.value)" 发送文本框的值。
我们是否假设您的 php 代码在 getuser.php 中？ (1) 你的变量是$word->$word = $_GET['q'];，但你的查询中有$q-> LIKE '$q'。 (2) 此外，您可能希望在查询值中添加通配符 % -> ... LIKE '%$word%' ...。 (3) 你应该清理你的用户数据 -> $word = $mysqli->real_escape_string($_GET['q']);
你的问题是什么？

标签： javascript php ajax search

【解决方案1】：

更改查询

$word = $_GET['q'];

$sql= "SELECT prodNam FROM product WHERE prodNam LIKE '%".$word."%'";

欲了解更多信息：http://www.w3schools.com/sql/sql_like.asp

【讨论】：

【解决方案2】：

首先你需要在你的输入中生成一个“onkeyup”事件来调用你的javascript函数。

示例：

 <input id="search" name="search" type="text" class="form-control" placeholder="Busca alguna empresa" onkeyup="dinamic(this.value)" autocomplete="off"/>

在这里您将显示结果

                <div class="resultados " >

                <table class="table hidden" id="resultados" name="resultados">




                </table>

    </div>

现在让我们编写js函数：

function dinamic(cadena) { //here cadena is your input value
var min = 3;
if (cadena.length >= min) { // true when the typed value have 3 or more characters
    $.ajax({
        type: 'POST',  //method to pass the information to live_search.php
        url: 'live_search.php',
        data: 'cadena=' + cadena, //name of the post variable
        success: function (respuesta) { 
            $('#resultados').html(respuesta); //place to write results
        }
    });
}
if (cadena.length>min) { //will show or not the table depending on the input value
    document.getElementById('resultados').className = 'table';
} else
    document.getElementById('resultados').className += ' hidden';

}

让我们使用 php：

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'ezcart';
$conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

if ($conn->connect_error) {
    die('Could not connect to the database: ' . $conn->connect_error);
}

$word = $_POST['cadena'];
$sql= "SELECT prodNam FROM product WHERE prodNam LIKE '%".$word."%' ORDER BY prodNam ASC";
$result = $conn->query($sql);

if ($result->num_rows > 0) {

    while($row = $result->fetch_assoc()) {
        echo "<div><p>".$row[prodNam]."</p></div>";
    }
}
$conn->close();

请记住，在我的示例中，您的 php 文件名为 live_search.php

我建议你使用 PDO 而不是程序化 php

如果你愿意，我可以用 pdo 做一个例子。

【讨论】：