php + ajax + mysql instant search

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_44289860/article/details/98473480

php code

<?php
/**
 * Created by PhpStorm.
 * User: lenovo
 * Date: 2019/6/16
 * Time: 15:52
 */


$q=$_GET["q"];

header("Content-Type:text/html;charset=utf8");
$link = @mysqli_connect('localhost','root','root','',3306);

if(!$link){
    exit("连接失败");
}
mysqli_select_db($link, "ajax");

$query = "select * from demo";


$result = mysqli_query($link,$query);

$arr = array();

while ($row = mysqli_fetch_array($result)){

    array_push($arr,$row['AAA']);

}


    if (strlen($q) > 0) {
        $hint = "";
         for ($i = 0; $i < count($arr); $i++){
            if (strtolower($q) == strtolower(substr($arr[$i], 0, strlen($q)))) {
                if ($hint == "") {
                    $hint = $arr[$i];
                } else {
                    $hint = $hint . " , " . $arr[$i];
                }
            }
        }
}

if ($hint == "")
{
    $response="no suggestion";
}
else
{
    $response=$hint;
}

//输出响应
echo $response;

if (mysqli_connect_errno()){
    exit("失败");
}
mysqli_close($link);
?>

HTML code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input{
            border: 1px solid skyblue;
            width: 550px;
            height: 40px;
            margin-left:30%;
            margin-top: 150px;
        }
        input:focus{
            border: 1px solid blue;
        }
        #inp{
            display: block;
            width: 110px;
            height: 45px;
            background: blue;
            color: white;
            font-size: 25px;
            margin-left: 68.7%;
            margin-top: -44px;
        }
    </style>
    <script>
        function showHint(str)
        {
            var xmlhttp;
            if (str.length==0)
            {
                document.getElementById("txtHint").innerHTML="";
                return;
            }
            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","index.php?q="+str,true);
            xmlhttp.send();

        }
    </script>
</head>
<body>
<input type="text" onkeyup="showHint(this.value)">
<div id="inp">search</div>
<br>
<span id="txtHint"></span>
</body>
</html>

There are borrowed from w3school ajax tutorial

php + ajax + mysql instant search

Guess you like