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);