J
I think the best option is to receive from PHP all the data necessary to manage the user and you have to set up some options Typeahead: http://www.runningcoder.org/jquerytypeahead/documentation/#options-display - To specify the property to be displayed and where the searches will be made http://www.runningcoder.org/jquerytypeahead/documentation/#options-template - To create the format with which the results will be displayed, using https://developer.mozilla.org/es/docs/Learn/HTML/Howto/Use_data_attributes to temporarily save the additional information required and can be accessed $(elemento).data('nombre-de-atributo') http://www.runningcoder.org/jquerytypeahead/documentation/#callback-onClickAfter - To detect when selecting an option and updating other elementsIn this code fragment it is not necessary to access data attributes, because Typeahead uses the object of the arrangement when running the function onClickAfterEither way, I leave it as a reference.let data = [
{nombres: 'Juan Pérez', cedula: 'abc123456789' },
{nombres: 'José Gómez', cedula: 'xyz987654321' },
];
$(document).ready(function() {
$('#nombres').typeahead({
minLength: 1,
maxItem: 10,
// Definir propiedades que se van a mostrar y donde se hará la búsqueda
display: ['nombres'],
// Formato de resultados
template: `<span data-cedula="{{cedula}}">{{nombres}}</span>`,
// Origen de datos
source: {data: data},
callback: {
// "Escuchar" clics en elementos de resultados
onClickAfter: function (node, a, item, event) {
// Actualizar valor de cédula
$('#cedula').val(item.cedula);
}
}
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>
<form id="form-country_v2" name="form-country_v2">
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
Nombre: <input type="text" id="nombres" placeholder="Buscar">
</div>
<div class="typeahead__button">
<button type="submit">
<i class="typeahead__search-icon"></i>
</button>
</div>
</div>
</div>
<div>
Cédula: <input type="text" id="cedula">
</div>
</form>What do you need to change?You must update the PHP code to generate the arrangement with the information you will use to update other fields:<?php
include("conn.php");
// Evita posibles errores definiendo antes el arreglo
$nombres = [];
$palabraclave = strval($_POST['busqueda']);
$busqueda = "{$palabraclave}%";
// En lugar de SELECT *, solicita solo los campos necesarios
$consultaDB = $conn->prepare("SELECT nombres, cedula FROM clientes WHERE nombres LIKE ?");
$consultaDB->bind_param("s",$busqueda);
$consultaDB->execute();
$resultado = $consultaDB->get_result();
if ($resultado->num_rows > 0) {
while($registros = $resultado->fetch_assoc()) {
// Agrega todo el registro, solo contiene los campos seleccionados en la consulta
$nombres[] = $registros;
}
}
// Siempre debes devolver un JSON, aunque sea arreglo vacío si no hay resultados
echo json_encode($nombres);
$consultaDB->close();
The result will be like the arrangement data from the code fragment. Now, you just need to adapt your Javascript, letting you Typeahead execute the AJAX request and it is configured in the same way as requests jQuery. Reference: http://www.runningcoder.org/jquerytypeahead/documentation/#options-source : $(document).ready(function () {
$('#nombres').typeahead({
minLength: 1,
maxItem: 10,
display: ['nombres'],
template: <span data-cedula="{{cedula}}">{{nombres}}</span>,
source: { data: {
// Propiedad, no función, Typeahead hará la petición
ajax: {
// Misma configuración que $.ajax()
url: 'consulta.php',
data: 'busqueda=' + busqueda,
dataType: 'json',
type: 'POST'
// No es necesario "success:", a menos que quieras cambiar algo
}
}},
callback: {
onClickAfter: function (node, a, item, event) {
$('#cedula').val(item.cedula);
}
}
});
});
You're probably gonna need to add some other field in the table, maybe ID, but that's left to your criteria.
