Basic PHP Tutorial

Advanced PHP Tutorial

PHP & MySQL

PHP Reference Manual

PHP MySQL Ajax real-time search

In this tutorial, you will learn how to create a real-time MySQL database search feature using PHP and Ajax.

Ajax real-time database search

You can create a simple real-time database search feature using Ajax and PHP, which will display search results as you start typing characters in the search input box.

In this tutorial, we will create a real-time search box that will search the 'countries' table and asynchronously display the results. However, first we need to create the table.

Passos1Create database table

Execute the following SQL query to create the 'countries' table in the MySQL database.

Example

CREATE TABLE countries (
　　　　id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
　　　　name VARCHAR(50) NOT NULL
);

After creating the table, you need to useSQL INSERT statementFill in some data.

If you are not familiar with the steps to create a table, please seeSQL CREATE TABLE statementtutorial to get detailed information about the syntax for creating tables in the MySQL database system.

Passos2: Establish the search form

Now, let's create a simple Web interface that allows users to search for "countries" in real time"Available in the tablepaíses/regiõesname, as if it were auto-completion or pre-entry.

Create a named " search-form.php" PHP file, and paste the following code into it.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP MySQL Database Real-time Search</title>
<style type="text/css">
　　　　body{
　　　　　　　　font-family: Arail, sans-serif;
　　　　}
　　　　/*Set the style of the search box　*/
　　　　.search-box{
　　　　　　　　width:　300px;
　　　　　　　　position: relative;
　　　　　　　　display: inline-block;
　　　　　　　　font-size:　14px;
　　　　}
　　　　.search-box input[type="text"]{
　　　　　　　　height:　32px;
　　　　　　　　padding:　5px　10px;
　　　　　　　　border:　1px solid #CCCCCC;
　　　　　　　　font-size:　14px;
　　　　}
　　　　.result{
　　　　　　　　position: absolute;　　　　　　　　
　　　　　　　　z-index:　999;
　　　　　　　　top:　100%;
　　　　　　　　left: 0;
　　　　}
　　　　.search-box input[type="text"], .result{
　　　　　　　　width:　100%;
　　　　　　　　box-sizing: border-box;
　　　　}
　　　　/*　Formatting result items　*/
　　　　.result p{
　　　　　　　　margin: 0;
　　　　　　　　padding:　7px　10px;
　　　　　　　　border:　1px solid #CCCCCC;
　　　　　　　　border-top: none;
　　　　　　　　cursor: pointer;
　　　　}
　　　　.result p:hover{
　　　　　　　　background: #f2f2f2;
　　　　}
</style>
<script src="https://code.jquery.com/jquery-1jquery12jquery4./script>
.min.js"></<script type="text
javascript">
　　　　$(document).ready(function(){-$('.search
　　　　　　　　/*box input[type="text"]').on("keyup input", function(){　*/
　　　　　　　　Obter valor da entrada ao alterar
　　　　　　　　var inputVal = $(this).val();
　　　　　　　　var resultDropdown = $(this).siblings(".result");
　　　　　　　　　　　　if(inputVal.length){-$.get("search.php", {term: inputVal}).done(function(data){
　　　　　　　　　　　　　　　　//Exibir os dados retornados no navegador
　　　　　　　　　　　　　　　　resultDropdown.html(data);
　　　　　　　　　　　　});
　　　　　　　　} 	else{
　　　　　　　　　　　　resultDropdown.empty();
　　　　　　　　}
　　　　});
　　　　
　　　　//Definir valor da entrada de busca ao clicar no item de resultado
　　　　$(document).on("click", "result p", function(){
　　　　　　　　$(this).parents(".search-caixa").find('input[type="text"]').val($(this).text());
　　　　　　　　$(this).parent(".result").empty();
　　　　});
});
</script>
</head>
　　　　<div class="search-caixa">
　　　　　　　　<input type="text" autocomplete="off" placeholder="Procurar país..."　/>
　　　　　　　　<div class="result"></div>
　　　　</div>
</html>

ao alterar o conteúdo da entrada de busca ou ocorrer um evento de teclado na entrada de busca, o código jQuery envia uma solicitação Ajax para o "backend"-arquivo "search.php", que lê depaíses/regiõesrelacionadascountriesProcurar palavras das gravações na tabela. Essas gravações serão inseridas mais tarde pelo jQuery<div>e exibido no navegador.

Passos3: processamento de consultas de busca no backend

Este é nosso "backend"-código-fonte do arquivo "search.php", que pesquisa o banco de dados com base na string de consulta enviada pela solicitação Ajax e envia os resultados de volta ao navegador.

Exemplo online: modo procedimental

<?php
/*　tentar conectar ao servidor MySQL. Supondo que você esteja executando MySQL
servidor com configurações padrão (usuário 	"root", sem senha)　*/
$link = mysqli_connect("localhost", "root", "", "demo");
　
//Verificar a conexão
if($link === false){
　　　　die("Erro: Não é possível conectar. " . mysqli_connect_error());
}
　
if(isset($_REQUEST["term"])){
　　　　//Preparar sentença select
　　　　	$sql = 	"SELECT　*　FROM countries WHERE name LIKE ?";
　　　　
　　　　if($stmt = mysqli_prepare($link, $sql)){
　　　　　　　　//Ligar variável como parâmetro à sentença preparada
　　　　　　　　mysqli_stmt_bind_param($stmt, "s", $param_term);
　　　　　　　　
　　　　　　　　//Definir parâmetros
　　　　　　　　$param_term = $_REQUEST["term"] . '%';
　　　　　　　　
　　　　　　　　//　Attempt to executar a sentença preparada
　　　　　　　　if(mysqli_stmt_execute($stmt)){
　　　　　　　　　　　　$result = mysqli_stmt_get_result($stmt);
　　　　　　　　　　　　
　　　　　　　　　　　　//Verificar o número de linhas no conjunto de resultados
　　　　　　　　　　　　if(mysqli_num_rows($result) > 0){
　　　　　　　　　　　　　　　　//Obter linha de resultado como array associativo
　　　　　　　　　　　　　　　　while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
　　　　　　　　　　　　　　　　　　　　echo 	"<p>" . 	$row["name"] . 	"/p>";
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　} 	else{
　　　　　　　　　　　　　　　　echo 	"<p>nenhum registro correspondente encontrado</p>";
　　　　　　　　　　　　}
　　　　　　　　} 	else{
　　　　　　　　　　　　echo "Erro: Não é possível executar $sql." . mysqli_error($link);
　　　　　　　　}
　　　　}
　　　　　
　　　　//finalizar declaração
　　　　mysqli_stmt_close($stmt);
}
　
//fechar conexão
mysqli_close($link);
?>

Exemplo online: forma orientada a objetos

<?php
/*　tentar conectar ao servidor MySQL. Supondo que você esteja executando MySQL
servidor com configurações padrão (usuário 	"root", sem senha)　*/
$mysqli = new mysqli("localhost", "root", "", "demo");
　
//Verificar a conexão
if($mysqli === false){
　　　　die("Erro: Não é possível conectar. " . $mysqli-connect_error);
}
　
if(isset($_REQUEST["term"])){
　　　　//Sentença preparada select
　　　　	$sql = 	"SELECT　*　FROM countries WHERE name LIKE ?";
　　　　
　　　　if($stmt = $mysqli-prepare($sql)){
　　　　　　　　//Ligar variável como parâmetro à sentença preparada
　　　　　　　　	$stmt-bind_param("s", $param_term);
　　　　　　　　
　　　　　　　　//Definir parâmetros
　　　　　　　　$param_term = $_REQUEST["term"] . '%';
　　　　　　　　
　　　　　　　　//　Tentar executar a sentença preparada
　　　　　　　　if(	$stmt-execute()){
　　　　　　　　　　　　$result = $stmt-get_result();
　　　　　　　　　　　　
　　　　　　　　　　　　//Verificar o número de linhas no conjunto de resultados
　　　　　　　　　　　　if($result-num_rows > 0){
　　　　　　　　　　　　　　　　//Obter linha de resultado como array associativo
　　　　　　　　　　　　　　　　while($row = $result-fetch_array(MYSQLI_ASSOC)){
　　　　　　　　　　　　　　　　　　　　echo 	"<p>" . 	$row["name"] . 	"/p>";
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　} 	else{
　　　　　　　　　　　　　　　　echo 	"<p>nenhum registro correspondente encontrado</p>";
　　　　　　　　　　　　}
　　　　　　　　} 	else{
　　　　　　　　　　　　echo "Erro: Não é possível executar $sql." . mysqli_error($link);
　　　　　　　　}
　　　　}
　　　　　
　　　　//finalizar declaração
　　　　	$stmt->close();
}
　
//fechar conexão
	$mysqli->close();
?>

exemplo online: método PDO

<?php
/*　tentar conectar ao servidor MySQL. Supondo que você esteja executando MySQL
servidor com configurações padrão (usuário 	"root", sem senha)　*/
try{
　　　　	$pdo = 	new 	PDO("mysql:host=localhost;dbname=demo", 	"root", 	"");
　　　　//definir o modo de erro PDO como exceção
　　　　	$pdo->setAttribute(PDO::ATTR_ERRMODE, 	PDO::ERRMODE_EXCEPTION);
} 	catch(PDOException 	$e){
　　　　die("Erro: Não foi possível conectar. 	" . 	$e->getMessage());
}
　
//tentar executar consulta de busca
try{
　　　　if(isset($_REQUEST["term"])){
　　　　　　　　//criar declaração preparada
　　　　　　　　	$sql = 	"SELECT　*　FROM 	countries 	WHERE 	name 	LIKE ":term";
　　　　　　　　	$stmt = 	$pdo->prepare(	$sql);
　　　　　　　　	$term = 	$_REQUEST["term"] . 	'%';
　　　　　　　　//ligar parâmetros à declaração
　　　　　　　　	$stmt->bindParam(":term", 	$term);
　　　　　　　　//executar declaração preparada
　　　　　　　　	$stmt->execute();
　　　　　　　　if(	$stmt->rowCount() > 0){
　　　　　　　　　　　　while(	$row = 	$stmt->fetch()){
　　　　　　　　　　　　　　　　echo 	"<p>" . 	$row["name"] . 	"/p>";
　　　　　　　　　　　　}
　　　　　　　　} 	else{
　　　　　　　　　　　　echo 	"<p>nenhum registro correspondente encontrado</p>";
　　　　　　　　}
　　　　}　　
} 	catch(PDOException 	$e){
　　　　die("Erro: Não foi possível executar 	$sql. 	" . 	$e->getMessage());
}
　
//finalizar declaração
unset($stmt);
　
//fechar conexão
unset($pdo);
?>

SQL SELECTdeclarações comLIKEcombinação de operadores paracountriesprocurar registros correspondentes na tabela do banco de dados. Implementamosdeclarações preparadas,para melhorar o desempenho da busca e evitarinjeção SQLataque.

Atenção:Antes de usar a entrada do usuário em uma instrução SQL, sempre faça a filtração e verificação. Você também pode usar a função PHP mysqli_real_escape_string() para escapar os caracteres especiais na entrada do usuário e criar strings SQL válidas para evitar a injeção SQL.

Funções Ctype PHP CRUD MySQL PHP