Tutorial básico PHP

Tutorial avanzado PHP

PHP & MySQL

Manual de referencia PHP

PHP MySQL Ajax Búsqueda en tiempo real

En este tutorial, aprenderá cómo crear una función de búsqueda en tiempo real de base de datos MySQL utilizando PHP y Ajax.

Búsqueda en tiempo real de base de datos Ajax

Puede crear una función de búsqueda en tiempo real de base de datos simple utilizando Ajax y PHP, que mostrará los resultados de búsqueda cuando comience a escribir algunos caracteres en el cuadro de entrada de búsqueda.

En este tutorial, crearemos una caja de búsqueda en tiempo real que buscará en la tabla countries y mostrará los resultados de manera asincrónica. Pero primero, necesitamos crear esa tabla.

Pasos1：Crear tabla de base de datos

Ejecute la siguiente consulta SQL para crear la tabla countries en la base de datos MySQL.

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.

Pasos2: Establishing 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ís/regiónname, as if it were auto-completion or pre-entry.

Create a named " search-put the following code in the PHP file "form.php".

<!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(){　*/
　　　　　　　　Obtener el valor de entrada al cambiar
　　　　　　　　var inputVal = $(this).val();
　　　　　　　　var resultDropdown = $(this).siblings(".result");
　　　　　　　　　　　　if(inputVal.length){-$.get("search.php", {term: inputVal}).done(function(data){
　　　　　　　　　　　　　　　　//Mostrar los datos devueltos en el navegador
　　　　　　　　　　　　　　　　resultDropdown.html(data);
　　　　　　　　　　　　});
　　　　　　　　} else{
　　　　　　　　　　　　resultDropdown.empty();
　　　　　　　　}
　　　　});
　　　　
　　　　//Establecer el valor de la entrada de búsqueda al hacer clic en un elemento de resultado
　　　　$(document).on("click", "p.result", function(){
　　　　　　　　$(this).parents(".search-caja").find('input[type="text"]').val($(this).text());
　　　　　　　　$(this).parent(".result").empty();
　　　　});
});
</script>
</cabecera>
　　　　<div class="search-caja">
　　　　　　　　<input type="text" autocomplete="off" placeholder="Buscar país..."　/>
　　　　　　　　<div class="result"></div>
　　　　</div>
</html>

Cada vez que se cambia el contenido de la entrada de búsqueda o se produce un evento de tecleo en la entrada de búsqueda, el código jQuery envía una solicitud Ajax a "backend"-el archivo "search.php", que se carga desdepaís/regiónrelacionadoscountriesBuscar palabras en la tabla los registros. Estos registros se insertarán más tarde por jQuery<div>y mostrar en el navegador.

Pasos3: procesar consultas de búsqueda en el backend

Este es nuestro "backend"-el código fuente del archivo "search.php", que busca en la base de datos según la cadena de consulta enviada por la solicitud Ajax y envía los resultados al navegador.

Ejemplo en línea: método procedimental

<?php
/*　intentar conectar al servidor MySQL. Supongamos que está ejecutando MySQL
servidor con configuraciones predeterminadas (usuario "root", sin contraseña)　*/
$link = mysqli_connect("localhost", "root", "", "demo");
　
//check the connection
if($link === false){
　　　　die("error: unable to connect." . mysqli_connect_error());
}
　
if(isset($_REQUEST["term"])){
　　　　//prepare the select statement
　　　　$sql = "SELECT　*　FROM countries WHERE name LIKE ?";
　　　　
　　　　if($stmt = mysqli_prepare($link, $sql)){
　　　　　　　　//bind the variable as a parameter to the prepared statement
　　　　　　　　mysqli_stmt_bind_param($stmt, "s", $param_term);
　　　　　　　　
　　　　　　　　//set the parameter
　　　　　　　　$param_term = $_REQUEST["term"] . '%';
　　　　　　　　
　　　　　　　　//　Attempt to execute the prepared statement
　　　　　　　　if(mysqli_stmt_execute($stmt)){
　　　　　　　　　　　　$result = mysqli_stmt_get_result($stmt);
　　　　　　　　　　　　
　　　　　　　　　　　　//check the number of rows in the result set
　　　　　　　　　　　　if(mysqli_num_rows($result) > 0){
　　　　　　　　　　　　　　　　//get the result rows as an associative array
　　　　　　　　　　　　　　　　while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
　　　　　　　　　　　　　　　　　　　　echo "<p>" . $row["name"] . "</p>";
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　} else{
　　　　　　　　　　　　　　　　echo "<p>no se encontraron registros coincidentes</p>";
　　　　　　　　　　　　}
　　　　　　　　} else{
　　　　　　　　　　　　echo "error: unable to execute $sql." . mysqli_error($link);
　　　　　　　　}
　　　　}
　　　　　
　　　　//finalizar declaración
　　　　mysqli_stmt_close($stmt);
}
　
//cerrar conexión
mysqli_close($link);
?>

Online example: object-oriented approach

<?php
/*　intentar conectar al servidor MySQL. Supongamos que está ejecutando MySQL
servidor con configuraciones predeterminadas (usuario "root", sin contraseña)　*/
$mysqli = new mysqli("localhost", "root", "", "demo");
　
//check the connection
if($mysqli === false){
　　　　die("error: unable to connect." . $mysqli-connect_error);
}
　
if(isset($_REQUEST["term"])){
　　　　//select prepared statement
　　　　$sql = "SELECT　*　FROM countries WHERE name LIKE ?";
　　　　
　　　　if($stmt = $mysqli-prepare($sql)){
　　　　　　　　//bind the variable as a parameter to the prepared statement
　　　　　　　　$stmt-bind_param("s", $param_term);
　　　　　　　　
　　　　　　　　//set the parameter
　　　　　　　　$param_term = $_REQUEST["term"] . '%';
　　　　　　　　
　　　　　　　　//　try to execute the prepared statement
　　　　　　　　if($stmt-execute());
　　　　　　　　　　　　$result = $stmt-get_result();
　　　　　　　　　　　　
　　　　　　　　　　　　//check the number of rows in the result set
　　　　　　　　　　　　if($result-num_rows > 0){
　　　　　　　　　　　　　　　　//get the result rows as an associative array
　　　　　　　　　　　　　　　　while($row = $result-fetch_array(MYSQLI_ASSOC)){
　　　　　　　　　　　　　　　　　　　　echo "<p>" . $row["name"] . "</p>";
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　} else{
　　　　　　　　　　　　　　　　echo "<p>no se encontraron registros coincidentes</p>";
　　　　　　　　　　　　}
　　　　　　　　} else{
　　　　　　　　　　　　echo "error: unable to execute $sql." . mysqli_error($link);
　　　　　　　　}
　　　　}
　　　　　
　　　　//finalizar declaración
　　　　$stmt->close();
}
　
//cerrar conexión
$mysqli->close();
?>

ejemplo en línea: método PDO

<?php
/*　intentar conectar al servidor MySQL. Supongamos que está ejecutando MySQL
servidor con configuraciones predeterminadas (usuario "root", sin contraseña)　*/
try{
　　　　$pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
　　　　//establecer el modo de error PDO en excepciones
　　　　$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
　　　　die("Error: No se puede conectar. ". $e->getMessage());
}
　
//intentar ejecutar la consulta de búsqueda
try{
　　　　if(isset($_REQUEST["term"])){
　　　　　　　　//crear declaración preparada
　　　　　　　　$sql = "SELECT　*　FROM countries WHERE name LIKE :term";
　　　　　　　　$stmt = $pdo->prepare($sql);
　　　　　　　　$term = $_REQUEST["term"] . "%";
　　　　　　　　//vincular parámetros a la declaración
　　　　　　　　$stmt->bindParam(":term", $term);
　　　　　　　　//ejecutar declaración preparada
　　　　　　　　$stmt->execute();
　　　　　　　　if($stmt->rowCount() > 0){
　　　　　　　　　　　　while($row = $stmt->fetch()){
　　　　　　　　　　　　　　　　echo "<p>" . $row["name"] . "</p>";
　　　　　　　　　　　　}
　　　　　　　　} else{
　　　　　　　　　　　　echo "<p>no se encontraron registros coincidentes</p>";
　　　　　　　　}
　　　　}　　
} catch(PDOException $e){
　　　　die("Error: No se puede ejecutar el $sql. ". $e->getMessage());
}
　
//finalizar declaración
unset($stmt);
　
//cerrar conexión
unset($pdo);
?>

SQL SELECTen la sentenciaLIKEcombinación de operadores paracountriesbuscar registros coincidentes en la tabla de la base de datos. Hemos implementadodeclaraciones preparadas,para mejorar el rendimiento de la búsqueda y evitarinyección SQLataque.

Nota:Antes de usar la entrada del usuario en una sentencia SQL, siempre realice un filtrado y validación. También puede utilizar la función PHP mysqli_real_escape_string() para escapar los caracteres especiales de la entrada del usuario y crear una cadena SQL válida para evitar la inyección SQL.

Funciones de Ctype en PHP CRUD en PHP