input con autocompletado y con enlaces | datos de MySQL en PHP

0
102
PHP
PHP

En este tutorial vamos a crear un input con autocompletado con datos de MYSQL en PHP. El origen de los datos será de MYSQL por lo tanto es totalmente dinámico. Habrá un cuadro de búsqueda donde el script que esta en el servidor devuelve los datos por JSON y mientras escribes te devuelve el autocompletado como hace google. Este widget hace que las búsquedas sean mucho más fáciles y lo puedes implementar en tu web sin problemas. Puedes usarlo para buscar productos,categorías, provincias…

Vamos a empezar y espero que os guste:

1º Crear tablas

1º Creamos las tablas en MYSQL a traves de phpMyAdmin puedes copiar el código y ejecutarlo sin problemas, te ahorrará tiempo.

--
-- Database: `Quecosasleo`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_posts`
--

CREATE TABLE IF NOT EXISTS `tbl_posts` (
  `postID` int(11) NOT NULL AUTO_INCREMENT,
  `postTitle` varchar(255) NOT NULL,
  `postUrl` varchar(255) NOT NULL,
  PRIMARY KEY (`postID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

--
-- Dumping data for table `tbl_posts`
--

INSERT INTO `tbl_posts` (`postID`, `postTitle`, `postUrl`) VALUES
(1, 'Página principal', 'https://quecosasleo.com/'),
(2, 'Calcular la edad php', 'https://quecosasleo.com/2018/02/calcular-la-edad-desde-la-fecha-nacimiento-php/'),
(3, 'Obtener la url actual php', 'https://quecosasleo.com/2018/02/obtener-la-url-actual-php/');

2º Conexión De Base

Al archivo lo puedes llamar: dbconfig.php

<?php
 
 $DBhost = "localhost";
 $DBuser = "root";
 $DBpass = "";
 $DBname = "Quecosasleo";
 
 try {
  $DBcon = new PDO("mysql:host=$DBhost;dbname=$DBname",$DBuser,$DBpass);
 } catch(PDOException $ex){
  die($ex->getMessage());
 }

3º Script para el servidor PHP

Este archivo puedes llamarlo busquedas.php es el que se encarga de recoger los items de la tabla que acabas de crear arriba. Devuelve la información por JSON y se mostrarán en el input

<?php

 require_once 'dbconfig.php';

 $keyword = trim($_REQUEST['term']);

 $sugg_json = array();    
 $json_row = array();    
 

 $keyword = preg_replace('/\s+/', ' ', $keyword); 

 $query = 'SELECT postID, postTitle, postUrl FROM tbl_posts WHERE postTitle LIKE :term'; 
 
 $stmt = $DBcon->prepare( $query );
 $stmt->execute(array(':term'=>"%$keyword%"));
 
 if ( $stmt->rowCount()>0 ) {
  
  while($recResult = $stmt->fetch(PDO::FETCH_ASSOC)) {
      $json_row["id"] = $recResult['postUrl'];
      $json_row["value"] = $recResult['postTitle'];
      $json_row["label"] = $recResult['postTitle'];
      array_push($sugg_json, $json_row);
  }
  
 } else {
     $json_row["id"] = "#";
     $json_row["value"] = "";
     $json_row["label"] = "Nothing Found!";
     array_push($sugg_json, $json_row);
 }
 
 $jsonOutput = json_encode($sugg_json, JSON_UNESCAPED_SLASHES); 
 print $jsonOutput;

4º Crear la vista HTML

Crea un archivo index.php para meter el siguiente código:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="col-lg-offset-2">
<form>
<div class="form-group">
<div class="input-group">
<input id="txtSearch" class="form-control input-lg" type="text" placeholder="Buscar datos de MYSQL por PHP,AJAX y Json" />
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
</div>
</form>  
</div>

5º Javascript / Código para el autocompletado

Este código debes introducirlo al final del index.php. Hace que la búsqueda sea más dinámica y con la función .autocomplete podremos hacer funcionar el autocompletado con escasas líneas.

$(document).ready(function(){
 
 $('#txtSearch').autocomplete({
     source: "busquedas.php",
     minLength: 2,
     select: function(event, ui) {
         var url = ui.item.id;
         if (url != '#') {
             location.href = url
         }
     },
     open: function(event, ui) {
         $(".ui-autocomplete").css("z-index", 1000)
     }
 })
 
});

6º Personalizar input con CSS

Si quieres dar un toque más personalizado puedes usar este código de css, crea un archivo style.css y llámalo en el index.php

form .form-group{
   width: 700px;
   max-width: 100%;
   border-radius: 0 !important;
}
* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
* html .ui-autocomplete {
    height: 300px;
}

.ui-autocomplete .ui-menu-item-wrapper {
    font-size: 15px;
    border-radius: 0;
    border-bottom: solid #eceff1 2px;
    padding: 10px;
    color: #000;
    background: #f9f9f9;
}
.ui-autocomplete .ui-menu-item {
    color: #000;
    background: #f9f9f9;
}

.ui-autocomplete .ui-menu-item:hover, .ui-menu-item-wrapper:hover {
    color: #fff;
    background: #a8a9d0;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
 color: #fff;
    background: #967cfc;
    background: #a8a9d0;
    border: 0;
}

 

input con autocompletado y con enlaces | datos de MySQL en PHP
¿Te gusta el articulo?

Dejar respuesta

Please enter your comment!
Please enter your name here