0

tengo un problemita con una parte del código.

Trato de hacer un buscador instantáneo que al meter datos (matrícula) mediante un input, muestre (como verificación) que esa matrícula existe y mostrar el nombre de la persona que tiene esa matrícula.

Me funciona bien al momento de escribir (keyup)... pero pasa que adicionalmente le añadí un autocomplete (select), y el problema es que cuando escribo (ej: 2 caracteres) ... y quiero seleccionar una de las opciones de autocomplete (select). Al momento de rellenar el campo input... la busqueda instantanea queda listada como si hubiera escrito solo (los 2 caracteres, siguiendo el ej).

¿Cómo podría hacer para que al seleccionar una opción (select) del autocomplete, me verifique en la busqueda instantanea agarrando todos los caracteres rellenados?.

Adjunto el código.

index.php

<div class="panel panel-default" style="margin-left: 15px;">
  <div>
    <table class="table" style="margin-bottom: -1px;">
  <td><div class="panel-heading"><h7>Código*</h7></div></td>
  <td><div class="panel-heading"><h7><i>Verificación</i></h7></div></td>
   </table>
    <table class="table">
  <td><center>
    <input maxlength="11" type="text" required name="codigo_pac" id="skills2" onkeyup="buscar_ajax(this.value); ">
    </center>
    <input type="text" id="busqueda" />
  </td>
  <td>
    <div id="resultado"></div>
  </td>

    </table>

  </div>
  </div>

El script js es:

<script>
$(document).ready(function(){

    var consulta;

     //hacemos focus al campo de búsqueda
    $("#skills2").focus();

    //comprobamos si se pulsa una tecla
    $("#skills2").keyup(function(e){

          //obtenemos el texto introducido en el campo de búsqueda
          consulta = $("#skills2").val();

          //hace la búsqueda

          $.ajax({
                type: "POST",
                url: "buscardetallepaciente.php",
                data: "b="+consulta,
                dataType: "html",
                beforeSend: function(){
                      //imagen de carga
                      $("#resultado").html("<p align='center'></p>");
                },
                error: function(){
                      alert("error petición ajax");
                },
                success: function(data){                                                    
                      $("#resultado").empty();
                      $("#resultado").append(data);

                }
          });


    });

});
 </script>

El archivo buscardetallepaciente.php es:

  <?php


  $buscar = $_POST['b'];

  if(!empty($buscar)) {
        buscar($buscar);
  }

  function buscar($b) {
        $con = mysqli_connect('localhost','root', 'xxxx');
        mysqli_select_db($con,'central');

        $sql = mysqli_query($con,"SELECT * FROM persona WHERE codigo LIKE '%".$b."%'");

        $contar = mysqli_num_rows($sql);

        if($contar == 0){
              echo "No se han encontrado resultados para '<b>".$b."</b>'.";
        }else{
              while($row=mysqli_fetch_array($sql)){
                    $a = $row['nombre'];
                    $b = $row['apellido_paterno'];
                    $c = $row['apellido_materno'];

                    echo $a." ".$b." ".$c."<br /><br />";    
              }
        }
  }

  ?>

Agradezco su ayuda de antemano... :D

5
  • porque no usas el autocomplete de jquery Commented el 13 jul. 2018 a las 20:38
  • a mi me sirvio mucho esto: daveismyname.blog/autocomplete-with-php-mysql-and-jquery-ui Commented el 13 jul. 2018 a las 20:41
  • el autocompletar me funciona perfectamente... solo que en la columna de "verificacion" quiero que al momento de escribir un codigo (matricula) muestre el nombre de la persona... y funciona cuando escribo... pero cuando uso una opción del autocomplete (select) ... ya no me busca los datos de la persona
    – KVN20
    Commented el 13 jul. 2018 a las 21:00
  • con el autoselect queres resultados parciales? (ie : todos los nombres de los posibles resultados) y al hacer el select te seleccione uno solo? Commented el 14 jul. 2018 a las 1:01
  • ya logre eso... pero en <div id="resultado"></div> ... al escribir en el input, se va mostrando el nombre de la persona (si es que la matricula que a medida se escribe, coincide). Pero tb le puse un Autoselect , lo que hace que al seleccionar una opción de posible resultado, el nombre de la persona en el <div id="resultado"></div> no se muestre de manera singular, sino el listado de los primero caracteres posibles que se escribio antes de dar click en el autoselect
    – KVN20
    Commented el 14 jul. 2018 a las 2:25

1 respuesta 1

2

jQuery autocomplete tiene un par de eventos para modificar qué es lo que se ve en la lista y cuál es el valor buscado.

Asimismo se puede pasar una función al source (origen de datos) para tener mas control del filtrado:

autocomplete.source

source: function (request, response) {}

En request.term viene lo que hay que buscar, response es un callback que recibe los resultados de la búsqueda, en este caso le enviaremos vacío si no hay nada ó una lista de pares value el código encontrado y label que es cómo se muestra esto en el selector, $resultados es un array vacío o con los resultados del evento success.

ajax.complete dentro de autocomplete.source

    complete: function (data) {
      datos = ($resultados)?$resultados.map(
        function(x){
          return {
          value: x.codigo,
          label: x.codigo +
            " - " + x.apellido_paterno +
            " " + x.apellido_materno +
            ", " + x.nombre
        };
      }):[];
      response(datos);
   }

El callback response hay que llamarlo siempre por eso está en el evento complete del ajax.

En el evento success guardamos los resultados en un array así podemos traer mas valores asociados a la búsqueda por registro:

ajax.success dentro de autocomplete.source

    success: function(data){
      $resultados = JSON.parse(data);
    },

Que luego mostramos al seleccionar un elemento de la lista:

autocomplete.onSelect

select: function( event, ui ) {
  $codigo = ui.item.value;
  var $detalles = $resultados.find(function(x){return x.codigo==$codigo});
  $("#resultado").html(
    "Código: " + $detalles['codigo'] + "<br/>" +
    "Nombre: " + $detalles['nombre'] + "<br/>" +
    "Apellidos: " + $detalles['apellido_paterno'] +
    " " + $detalles['apellido_materno'] + "<br/>" +
    "Label Mostrado: " + ui.item.label
  );
}

Aquí no hay chequeo de si $resultados existe pues si no hubo resultados, no se puede seleccionar uno.

Bonus: modificamos el render para que resalte la cadena buscada

  .data("ui-autocomplete")._renderItem = function (ul, item) {
    var newText = String(item.label).replace(
      new RegExp(this.term, "gi"),
      "<span class='ui-state-highlight'>$&</span>");
      return $("<li></li>")
      .data("item.autocomplete", item)
      .append("<div>" + newText + "</div>")
      .appendTo(ul);
    };

Para que todo esto funcione el php debe cambiar un poco para retornar un json con los datos.

Cambiamos los echo por un array $resultados que devolvemos vacío... ó con los resultados encontrados.

buscardetallepaciente.php

$resultados = [];
if(!empty($_POST['b'])) {

...

  while ($row = $result->fetch_array()) {
    $codigo = $row['codigo'];
    $nombre = $row['nombre'];
    $ape_pa = $row['apellido_paterno'];
    $ape_ma = $row['apellido_materno'];

    $resultados[] = [
      "codigo" => $codigo,
      "nombre" =>  $nombre,
      "apellido_paterno" =>  $ape_pa,
      "apellido_materno" =>  $ape_ma,
    ];
  }
}
echo json_encode($resultados);

También está bueno poder mostrar las cosas de una manera que haga mas fácil elegir el registro correcto, para esto modificamos un poco el SQL:

  SELECT codigo, nombre, apellido_paterno, apellido_materno
  FROM persona WHERE codigo LIKE ?
  ORDER BY apellido_paterno, apellido_materno, nombre, codigo
  LIMIT 35

Ordenamos por Apellidos, Nombre, código y limitamos los resultados a los primeros 35 (un select con muchos elementos se vuelve un poco incómodo). Podes devolver más resultados, ordenar por algún campo que tenga mas sentido, etc... fijate qué es lo mas conveniente para el usuario.

Todo junto quedaría:

// variable global para guardar los resultados
var $resultados = [];

$(function() {
  $("#skills2").autocomplete({
    source: function(request, response) {
      consulta = request.term;
      $.ajax({
        type: "POST",
        url: "buscardetallepaciente.php",
        data: "b=" + consulta,
        beforeSend: function() {
          //imagen de carga
          $("#resultado").html("");
        },
        error: function() {
          // si hay error limpiamos resultados
          $resultados = [];
          console.log("error petición ajax");
        },
        success: function(data) {
          // console.log("S:", data);
          // si hay éxito en la consulta parseamos resultados
          // éxito aquí también significa sin resultados
          $resultados = JSON.parse(data);
        },
        complete: function(data) {
          // console.log("C",data.responseText, $resultados);
          // si hay resultados mapeamos los datos correspondientes
          // value: el valor buscado
          // label: lo que se muestra para seleccionar

          datos = ($resultados) ? $resultados.map(
            function(x) {
              return {
                value: x.codigo,
                label: x.codigo +
                  " - " + x.apellido_paterno +
                  " " + x.apellido_materno +
                  ", " + x.nombre
              };
            }) : [];
          response(datos);
        }
      });
    },

    select: function( event, ui ) {
      // console.log(ui.item);
      // al seleccionar un elemento de la lista
      // recuperamos los campos extra de resultados

      $codigo = ui.item.value;
      var $detalles = $resultados.find(function(x){return x.codigo==$codigo});
      $("#resultado").html(
        "Código: " + $detalles['codigo'] + "<br/>" +
        "Nombre: " + $detalles['nombre'] + "<br/>" +
        "Apellidos: " + $detalles['apellido_paterno'] +
        " " + $detalles['apellido_materno'] + "<br/>" +
        "Label Mostrado: " + ui.item.label
      );
    },
  }).data("ui-autocomplete")._renderItem = function (ul, item) {
    var newText = String(item.label).replace(
      new RegExp(this.term, "gi"),
      "<span class='ui-state-highlight'>$&</span>");
      return $("<li></li>")
      .data("item.autocomplete", item)
      .append("<div>" + newText + "</div>")
      .appendTo(ul);
    };
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>autocompleit</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
</head>

<body>

  <div class="panel panel-default" style="margin-left: 15px;">
    <div>
      <table class="table" style="margin-bottom: -1px;">
        <td>
          <div class="panel-heading">
            <h7>Código*</h7>
          </div>
        </td>
        <td>
          <div class="panel-heading">
            <h7><i>Verificación</i></h7>
          </div>
        </td>
      </table>
      <table class="table">
        <td>
          <center>
            <input maxlength="11" type="text" required name="codigo_pac" id="skills2">
          </center>
        </td>
        <td>
          <div id="resultado"></div>
        </td>
      </table>
    </div>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</html>

y el php, incluyo una función para sanitizar la búsqueda via WHERE x LIKE ?:

<?php

/**
* Returns a string with backslashes before characters that need to be escaped.
* As required by MySQL and suitable for multi-byte character sets
* Characters encoded are NUL (ASCII 0), \n, \r, \, ', ", and ctrl-Z.
* In addition, the special control characters % and _ are also escaped,
* suitable for all statements, but especially suitable for `LIKE`.
*
* @param string $string String to add slashes to
* @return $string with `\` prepended to reserved characters
*
* @author Trevor Herselman
*/
if (function_exists('mb_ereg_replace'))
{
  function mb_escape(string $string)
  {
    return mb_ereg_replace('[\x00\x0A\x0D\x1A\x22\x25\x27\x5C\x5F]', '\\\0', $string);
  }
} else {
  function mb_escape(string $string)
  {
    return preg_replace('~[\x00\x0A\x0D\x1A\x22\x25\x27\x5C\x5F]~u', '\\\$0', $string);
  }
}

$resultados = [];
if(!empty($_POST['b'])) {

  $con = mysqli_connect('localhost','root', 'xxxx');
  mysqli_select_db($con,'central');

  $param = "%".mb_escape($_POST['b'])."%";

  $SQLquery =
 "SELECT codigo, nombre, apellido_paterno, apellido_materno
  FROM persona WHERE codigo LIKE ?
  ORDER BY apellido_paterno, apellido_materno, nombre, codigo
  LIMIT 35";

  $stmt = $con->prepare($SQLquery);
  $stmt->bind_param("s", $param);
  $stmt->execute();

  $result = $stmt->get_result();

  while ($row = $result->fetch_array()) {
    $codigo = $row['codigo'];
    $nombre = $row['nombre'];
    $ape_pa = $row['apellido_paterno'];
    $ape_ma = $row['apellido_materno'];

    $resultados[] = [
      "codigo" => $codigo,
      "nombre" =>  $nombre,
      "apellido_paterno" =>  $ape_pa,
      "apellido_materno" =>  $ape_ma,
    ];
  }
}


echo json_encode($resultados);
1
  • Muchas gracias, un buen código... me sirvió bastante (te lo agradezco)
    – KVN20
    Commented el 17 jul. 2018 a las 15:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.