Cuadro de búsqueda Ajax en PHP y MySQL

En este tutorial, vamos a construir un cuadro de búsqueda Ajax usando PHP como lenguaje principal. Ajax Search impulsa el uso de proyectos web como el que usa Google. Buscar a través de Ajax y también mantener menos carga en el servidor es un gran desafío.

CAMBIO
10 de abril de 2018: actualizado el código PHP5 a PHP7.

DEMO EN VIVO DESCARGAR

Ya publiqué sobre el cuadro de búsqueda Ajax en Node , estamos reemplazando el script de back-end de Node con PHP . El formato de los datos que provienen del servidor es el propio JSON. Llamaremos al servicio web de búsqueda mediante la solicitud GET.

Diseño de base de datos:

Abra su PHPMyadmin y cree una base de datos de cualquier nombre. Dentro de esa base de datos, ejecute la siguiente consulta.

CREAR TABLA ‘nombre_usuario’
(

    id_usuario
INT ( 20 ) CLAVE PRIMARIA ,
    nombre_TEXTO
) ;


Ponga algunos datos ficticios en él usando el comando INSERT.

Diseño de front-end:

Estoy usando la biblioteca JavaScript typeahead de Twitter para realizar una llamada Ajax al archivo PHP. Es una biblioteca ordenada y limpia especialmente diseñada para este tipo de propósito. Simplemente agregue la ruta a la sección HEAD y estará listo.

index.html
< html >
  < head >
    < title > Cuadro de búsqueda Ajax con PHP y MySQL < / title >
    < script src = “http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js “ >        < / script >
     < script src = ” typeahead.min.js “ > < / script >
    < / head >
    < body >
     < input type = ” text “ name = “typeahead” >
    < / cuerpo >
    < / html >

En el código anterior hemos diseñado el front-end de nuestra aplicación. Los códigos CSS están disponibles en el paquete de descarga.

Llamar a un script PHP usando GET

La siguiente tarea es llamar a nuestro script PHP cuando el usuario escribe en el cuadro de texto. Ya que estamos haciendo esto usando la biblioteca typeahead, podemos hacerlo usando lo siguiente.

index.html
  < script >

    $
( documento ) . ready ( function ( ) {

    $
( ‘input.typeahead’ ) . typeahead ( {

        nombre
: ‘typeahead’ ,

        remote
: ‘search.php? key =% QUERY’ ,

        limit
: 10
    } ) ;
} ) ;
    guión >

Obtiene automáticamente el valor del cuadro de texto en la variable% QUERY.

Recuperando datos de MySQL y devolviéndolos como JSON:

Aquí va la tarea principal. En el archivo PHP primero, tenemos que buscar el valor GET que almacenó el parámetro de búsqueda. Luego tenemos que formar una conexión a la base de datos MySQL y activar la consulta para obtener un resultado relevante.

Una vez que se ha obtenido el resultado, tenemos que empaquetarlo en formato JSON y regresar al front-end para mostrarlo como resultado.

search.php

    $ clave = $ _GET [ ‘clave’ ] ;
    $ matriz = matriz ( ) ;
    $ con = mysqli_connect ( “localhost” , “root” , “” , “demos” ) ;
    $ query = mysqli_query ( $ con , “seleccionar * de cfg_demos donde el título LIKE ‘% {$ key} %'” ) ;
    while ( $ fila = mysqli_fetch_assoc ( $ consulta ) )
    {
      $ matriz [] = $ fila [ ‘título’ ] ;
    }
    echo json_encode ( $ matriz ) ;
    mysqli_close ( $ con ) ;
?>

Por favor, cambie el parámetro de acuerdo con su base de datos y los detalles de la columna.

Ejecutando el código:

Si ha descargado el código fuente del proyecto, cree una base de datos de cualquier nombre y tabla usando el código que se muestra arriba y simplemente actualice esa información en Search.php

Coloque la carpeta del proyecto en el directorio htdocs ‘ y acceda a ella usando localhost / foldername.

Publicada en PHP

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *