how to autocomplete data with ajax and php?

0

I have a table in mysql called clients with the fields (id, client_name, client_address, client_phone, client_ email) and I show the data in the following table through a modal window

Now what I want to do in another page is to place an input and when writing a name I get the records that I have in the base and by selecting it, the fields (address, phone, email) are automatically filled with your information

but when selecting any name I do not see your information Could you help me please, I'll leave my code

<div class="container">
   <div class="panel panel-info">
  <div class="panel-heading">
		<h4><i class='glyphicon glyphicon-edit'></i> Nueva Orden de Trabajo</h4>
		</div>
		
<div class="panel-body">
		
	<form class="form-horizontal" role="form" id="datos_factura">
		<div class="form-group row">
				  
		<label for="nombre_cliente" class="col-md-1 control-label">Cliente</label>
				  		<div class="col-md-3">
					 		<input type="text" class="form-control input-sm" id="nombre_cliente" placeholder="Busca y selecciona un cliente" required>
					 		<input id="id" type='hidden'>	
				  		</div>
				  
				  	<label for="direcc" class="col-md-1 control-label">Direccion</label>
				  		<div class="col-md-2">
					 		<input type="text" class="form-control input-sm" id="direcc_cliente" placeholder="Direccion" readonly>
				  		</div>
					
				 	<label for="tel" class="col-md-1 control-label">Telefono</label>
						<div class="col-md-3">
							<input type="text" class="form-control input-sm" id="telef_cliente" placeholder="Telefono" readonly>
						</div>
				</div>
						
				<div class="form-group row">
							
					<label for="email" class="col-md-1 control-label">Email</label>
						<div class="col-md-3">
							<input type="text" class="form-control input-sm" id="email_cliente" placeholder="Telefono" readonly>
						</div>
				</div>
				
				<!--
				<div class="col-md-12">
					<div class="pull-right">
						<button type="button" class="btn btn-default" data-toggle="modal" data-target="#nuevoProducto">
						 <span class="glyphicon glyphicon-plus"></span> Nuevo producto
						</button>
						<button type="button" class="btn btn-default" data-toggle="modal" data-target="#nuevoCliente">
						 <span class="glyphicon glyphicon-user"></span> Nuevo cliente
						</button>
						<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
						 <span class="glyphicon glyphicon-search"></span> Agregar productos
						</button>
						<button type="submit" class="btn btn-default">
						  <span class="glyphicon glyphicon-print"></span> Imprimir
						</button>
					</div>	
				</div> -->
			</form>	
			
			<div id="resultados" class='col-md-12' style="margin-top:10px"></div><!-- Carga los datos ajax -->			
	</div><!--panel body-->
	</div><!--panel info-->	
		  <div class="row-fluid">
			<div class="col-md-12">
			
	

			
			</div>	
		 </div>
	
</div><!--container-->
	
	<script>
		$(function() {
						$("#nombre_cliente").autocomplete({
							source: "autocompletarClientes.php",
							minLength: 2,
							select: function(event, ui) {
								event.preventDefault();
								$('#id').val(ui.item.id);
								$('#nombre_cliente').val(ui.item.nombre_cliente);
								$('#direcc_cliente').val(ui.item.direcc_cliente);
								$('#telef_cliente').val(ui.item.telef_cliente);
								$('#email_cliente').val(ui.item.email_cliente);								
								
							 }
						});
						 
						
					});
		$("#nombre_cliente" ).on( "keydown", function( event ) {
						if (event.keyCode== $.ui.keyCode.LEFT || event.keyCode== $.ui.keyCode.RIGHT || event.keyCode== $.ui.keyCode.UP || event.keyCode== $.ui.keyCode.DOWN || event.keyCode== $.ui.keyCode.DELETE || event.keyCode== $.ui.keyCode.BACKSPACE )
						{
							$("#id" ).val("");
							$("#direcc_cliente" ).val("");
							$("#telef_cliente" ).val("");
							$("#email_cliente" ).val("");
											
						}
						if (event.keyCode==$.ui.keyCode.DELETE){
							$("#nombre_cliente" ).val("");
							$("#id" ).val("");
							$("#direcc_cliente" ).val("");
							$("#telef_cliente" ).val("");
							$("#email_cliente" ).val("");
						}
			});	
	</script>

and this other code

<?php
if (isset($_GET['term'])){
$con=@mysqli_connect('localhost', 'root', 'rootroot', 'registros');
    if(!$con){
        die("imposible conectarse: ".mysqli_error($con));
    }
    if (@mysqli_connect_errno()) {
        die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error());
    }
$return_arr = array();




/* If connection to database, run sql statement. */
if ($con)
{
	
	$fetch = mysqli_query($con,"SELECT * FROM clientes where nombre_cliente like '%nombre_cliente" . mysqli_real_escape_string($con,($_GET['term'])) . "%' LIMIT 0 ,50"); 
	
	/* Retrieve and store in array the results of the query.*/
	while ($row = mysqli_fetch_array($fetch)) {
		$id=$row['id'];
		$row_array['value'] = $row['nombre_cliente'];
		$row_array['id']=$id;
		$row_array['nombre_cliente']=$row['nombre_cliente'];
		$row_array['direcc_cliente']=$row['direcc_cliente'];
		$row_array['telef_cliente']=$row['telef_cliente'];
		$row_array['email_cliente']=$row['email_cliente'];
		array_push($return_arr,$row_array);
    }//cierra while
	
}//Cierra if con

/* Free connection resources. */
mysqli_close($con);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

}//cierra if isset
?>

What is my error? or how else can I do it? Thanks

    
asked by Root93 30.11.2016 в 04:17
source

1 answer

2

The first thing I would do is make a step by step of the data you are handling, that is, first make sure that the query is bringing the data that is and the format that you need to fill the rest of the form.

The first detail I notice is that in the like you are including the string "customer_name". I do not know the data of the table, but it would seem strange to me that they have this string in their content, on the other hand in the limit you are setting 0, 50 which means that you are requesting 0 records from the number 50, which would never bring you no record I leave this tutorial to understand that part, then that line would look like this:

$fetch = mysqli_query($con,"SELECT * FROM clientes where nombre_cliente LIKE '%" . mysqli_real_escape_string($con, $_GET['term']) . "%' LIMIT 50");  

The second thing I suggest to review is the information that arrives at the code where the query is made, I mean, do: var_dump($_GET['term']); And so go review what is in the variables after each call or operation.

The third observation I have is that you are using the keyDown event, this will send the information a character before the string is completed, so that the search is in each letter that is written is better to use the keyUp.

    
answered by 07.07.2017 в 23:39