Question

I'm having some troubles with my code, I want it to execute the php file whenever I enter something but it isn't working

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    function getStates(value) {
        $.post("search.php", {name:value},function(data)
            $("#results").html(data);
        }); 
    }
</script>
</head>
<input type="text" onkeyup="getStates(this.value)"/>
<br>
<div id="results"></div>
<body>
</body>
</html>

php

<?php
mysqli_connect("localhost", "#", "#") or die(mysqli_connect_errno());
mysql_select_db("#") or die(mysql_error());
$search = $_POST["name"];

$players = mysql_query("SELECT firstname FROM players WHERE firstname LIKE '%search%'");
while($player = mysql_fetch_array($players)) {
    echo "<div>" . $players["firstname"] . "</div>";
}

?>

Was it helpful?

Solution

From what I can see,you should change this

  '%search%' 

to

  '%{$search}%'

in

  $players = mysql_query("SELECT firstname FROM players WHERE firstname LIKE '%search%'");

EDIT

@user3187651 Assuming you've done everything right on the server side. Change your javascript to:

function getStates(value) {
    $.post("search.php", {name:value},function(data){
        $("#results").html(data);
    }
    ); 
}

This should get rid of the error in the client side.

OTHER TIPS

You are missing {. Just do:

function xyx(name) {
    $.post("search.php", { name: value }, function(data) {
        $("#results").html(data);
    });
}

There's something that is missing in your code:

  <!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> //ur getting the jquery via online
 <script>
 $(document).ready(function(){
    $("#textBoxId").change(function() //triggers when you change the value in your textbox
    {
       var value = $(this).val(); //gets the value of your textbox
       $.post("search.php", {id:value},function(data)
           $("#results").append(data);
        }); 
    }
 });
</script>
</head>
<body>
 <input type="text" id="textBoxId"/>
<br>
<div id="results"></div>
</body>
</html>

And in your php:

<?php
mysqli_connect("localhost", "#", "#") or die(mysqli_connect_errno());
mysql_select_db("#") or die(mysql_error());
$search = $_POST['id'];
$returnData = ""; 
$players = mysql_query("SELECT firstname FROM players WHERE firstname LIKE '%search%'");
while($player = mysql_fetch_array($players)) {
    $returnData .= "<div>" . $players["firstname"] . "</div>";
}
echo $returnData; 

For more secure and creative back-end code, you can use this.

<?php

$host = 'localhost';
$user = 'root';
$password = '';
$database = 'dev_testing';

$mysqli = new mysqli($host, $user, $password, $database);

$username = $_GET['username'];

$username = trim(htmlspecialchars($username));

$like = '%' . strtolower($username) . '%';
$statement = $mysqli -> prepare('
    SELECT name, picture, description 
    FROM users 
    WHERE lower(name) LIKE ?  
    ORDER BY INSTR(title, ?), title
    LIMIT 20'
);

if (
    $statement &&
    $statement -> bind_param('ss', $like, $username) &&
    $statement -> execute() &&
    $statement -> store_result() &&
    $statement -> bind_result($name, $picture, $description)
) {
    $array = [];
    while ($statement -> fetch()) {
        $array[] = [
            'name' => $name,
            'picture' => $picture,
            'description' => $description
        ];
    }
    echo json_encode($array);
    exit();
}

Advantages of the code

  • Prevents SQL Injection
  • Orders results from the best match
  • Sends a JSON response (JSON is light-weight)

Full Tutorial: Live Search with AJAX, PHP, and MYSQL

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top