JavaScript Live search of MYSQL records using AJAX and PHP | Quick programming tutorials

make a simple search box that works in real time using ajax requests and php for the myqsl connection.

more tutorials:
make a social website from scratch:

all crash courses:

code a live chat app in PHP and JavaScript:

make an eCommerce website from template:

convert an HTML template to PHP website:

simple signup and login system & security:

crop images with PHP:

PHP Object Oriented Programming basics:

Chart or graph using SVG:

Responsive web design:

clean pretty URLs:

support me on patreon:

my facebook:

[mdmoqimalam]

i just found your channel yesterday i am full busy in your channel from yesterday.. threres a lot to learn from you.
Thank you for such a good content.

[kidus]

Wow this is great, very very much thankful for your contribution, rly u doing an awesome job

[riccdago]

Great lesson as usual. Ty for your hard work sir.

[rstories]

i want when i click to go to other different pages??

[ashranshukla]

Hi sir, thank you as always for these awesome tutorials! I want to implement this feature into the Mybook website but I am having trouble with a few errors in the console. The first error is this:
Uncaught SyntaxError: Invalid hexadecimal escape sequence on this line
str += `<a href='<?=ROOT?><?php echo $FRIEND_ROW['type']; ?>/<?php echo $FRIEND_ROW['tag_name']; ?>' + obj[i].name + "</div></a>";

and the second error is this:
Uncaught ReferenceError: get_data is not defined at HTMLInputElement.oninput


These are my JS functions:
function get_data(text)
{
if(text.trim() == "")
return

var form = new FormData();
form.append('text', text);

var ajax = new XMLHttpRequest();

ajax.addEventListener('readystatechange', function(e){

if(ajax.readyState == 4 && ajax.status == 200){

//results are back

}
});

ajax.open('post', 'api.php', true);
ajax.send(form);
}

function handle_result(result)
{

var result_div =
var str = "";

var obj = JSON.parse(result);
for (var i = obj.length - 1; i >= 0; i--) {

str += `<a href='<?=ROOT?><?php echo $FRIEND_ROW['type']; ?>/<?php echo $FRIEND_ROW['tag_name']; ?>' + obj[i].name + "</div></a>";
}

result_div.innerHTML = str;

if(obj.length > 0){
show_results();
}else{
hide_results();
}
}

function show_results()
{

var result_div =

}

function hide_results()
{

var result_div =

}


This is the relevant HTML:
<form method="get" action="<?=ROOT?>search">
<div style="width: 800px;margin: auto;font-size: 28px;">

<a href="<?=ROOT?>home" id="title"
&nbsp &nbsp
<input class="search js-search" autofocus="true" id="search_box" type="text" name="" placeholder="Search Sociacube">
<div class="results js-results hide">

</div>

This is the code in api.php:
<?php

if(count($_POST) > 0)
{
$text = $_POST['text'];

$string =

try{

$con = new PDO($string, "root", "");

}catch(PDOException $e){

die($e->getMessage());
}

//read from database
$text = addslashes($text);
$stm = $con->query("select * from users where first_name like '$text%' ");

$result =

echo json_encode($result);
}


Would really appreciate your help on this!

[ashranshukla]

Hi sir can you please read my previous message about the search feature?