Imagen 1
Este componente nos permite filtrar los registros que tenemos en nuestra base de datos a través de un input="text", facilita la búsqueda; pues mientras vas escribiendo debajo nos muestra algunas opciones según su interés.
JQuery ha realizado un sin numero de aplicaciones que favorecen y agilizan el proceso de desarrollo de páginas web.
Código para el autocomplete, no olvidarse descargar los plugin de JQuery (ver aquí)
function formatItemG(row){
return "<table width='420px' border='0'><tr style='font-size:12px;'><td width='60'>" + row[1] + "</td><td width='360' align='right' style='padding-right:10px'>" + row[0] + " - <label style='color:#0000FF; font-weight:bold;'>" + row[4] + "</label></td></tr></table>";
}
function formatResult(row){
return row[0];
}
$('#codigo').autocomplete('buscar_repuesto.php', {
autoFill: true,
width: 450,
selectFirst: false,
formatItem: formatItemG,
formatResult: formatResult,
mustMatch : false,
extraParams: {
option: function(){ return "1"; },
part: function(){ return "1"; }
}
}).result(function(event, item){
$("#codigo").val(item[1]);
$("#descripcion").val(item[0]);
$("#medida").val(item[3]);
$("#precio").val(item[5]);
Tab("cantidad");
});
$('#descripcion').autocomplete('buscar_repuesto.php', {
autoFill: true,
width: 450,
selectFirst: false,
formatItem: formatItemG,
formatResult: formatResult,
mustMatch : false,
extraParams: {
option: function(){ return "1"; },
part: function(){ return "1"; },
name: function(){ return "1"; }
}
}).result(function(event, item){
$("#codigo").val(item[1]);
$("#descripcion").val(item[0]);
$("#medida").val(item[3]);
$("#precio").val(item[5]);
Tab("cantidad");
});
Donde el codigo y descripcion son los identificadores de los input="text"
Código HTML para hacer la ventana imagen 1
<fieldset>
<legend align= "center" style="width: 100%;text-align: left;color: #999;">REPUESTO :::...</legend>
<table border="0" cellspacing="1" style="width: 100%;padding: 2px;">
<tr style="font-size: 10px;text-align: center;">
<th style="width: 10%;">- CÓDIGO -</th>
<th style="width: 50%;">- DESCRIPCIÓN -</th>
<th style="width: 10%;">- CANTIDAD -</th>
<th style="width: 10%;">- PRECIO -</th>
<th style="width: 10%;">- MEDIDA -</th>
<th style="width: 10%;">- DSCTO -</th>
<th style="width: 5px;"></th>
</tr>
<tr style="text-align: center;">
<td><input type="text" id="codigo" style="width: 96%;text-align: center;"/></td>
<td><input type="text" id="descripcion" style="width: 99%;"/></td>
<td><input type="text" id="cantidad" style="width: 96%;text-align: center;" value="0" /></td>
<td><input type="text" id="precio" style="width: 96%;text-align: center;" value="0.00"/></td>
<td>
<select id="medida" name="medida" style="width: 100%;" disabled="disabled">
<option value="">---</option>
<option value="1">Unidad</option>
<option value="2">Caja</option> </select>
</td>
<td><input type="text" id="descuento" style="width: 96%;text-align: center;" value="0.00"/></td>
<td><img src="images/icon/add_item.png" width="16px" title="AGREGAR ITEM" style="cursor: pointer;" /></td>
</tr>
</table>
</fieldset>
En el archivo buscar_repuesto.php tenemos lo siguiente
<?php
session_start();
require("ClsSetting.php"); //Archivo de conexión
$Filter = $_GET['q']; //Variable del input text
if(isset($_GET['part'])){ //Parámetro extra
if(isset($_GET['name'])){ //Parámetro extra
$S = "description_part ILIKE '%$Filter%'";
}else{
$S = "reference_part ILIKE '%$Filter%'";
}
$Query = " SELECT cod_part,
description_part, reference_part, fk_cod_measure, fk_cod_brand, price_buy, price_sale, stock_minimum, stock_maximum, stock_real, fk_cod_model, fk_cod_state, fk_cod_supplier, FROM part WHERE $S ";
$FetchArray = $Conn->Query($Query);
while($row = $Conn->FetchArray($FetchArray)){
$rowB = $Conn->FetchArray($Conn->Query(" SELECT * FROM brand WHERE cod_brand='".$row[4]."' AND type_brand = 'REPUESTO' "));
echo $row[1]."|".$row[2]."|".$row[0]."|".$row[3]."|".$rowB[1]."|".$row[6]."\n"; //Todos los necesarios según lo que se tiene en la base de datos
}
}
?>
Ahora puedes tener ese tipo de buscadores interesantes en tus aplicaciones web. Comparte este enlace.
Código HTML para hacer la ventana imagen 1
<legend align= "center" style="width: 100%;text-align: left;color: #999;">REPUESTO :::...</legend>
<table border="0" cellspacing="1" style="width: 100%;padding: 2px;">
<tr style="font-size: 10px;text-align: center;">
<th style="width: 10%;">- CÓDIGO -</th>
<th style="width: 50%;">- DESCRIPCIÓN -</th>
<th style="width: 10%;">- CANTIDAD -</th>
<th style="width: 10%;">- PRECIO -</th>
<th style="width: 10%;">- MEDIDA -</th>
<th style="width: 10%;">- DSCTO -</th>
<th style="width: 5px;"></th>
</tr>
<tr style="text-align: center;">
<td><input type="text" id="codigo" style="width: 96%;text-align: center;"/></td>
<td><input type="text" id="descripcion" style="width: 99%;"/></td>
<td><input type="text" id="cantidad" style="width: 96%;text-align: center;" value="0" /></td>
<td><input type="text" id="precio" style="width: 96%;text-align: center;" value="0.00"/></td>
<td>
<select id="medida" name="medida" style="width: 100%;" disabled="disabled">
<option value="">---</option>
<option value="1">Unidad</option>
<option value="2">Caja</option> </select>
</td>
<td><input type="text" id="descuento" style="width: 96%;text-align: center;" value="0.00"/></td>
<td><img src="images/icon/add_item.png" width="16px" title="AGREGAR ITEM" style="cursor: pointer;" /></td>
</tr>
</table>
</fieldset>
En el archivo buscar_repuesto.php tenemos lo siguiente
<?php
session_start();
require("ClsSetting.php"); //Archivo de conexión
$Filter = $_GET['q']; //Variable del input text
if(isset($_GET['part'])){ //Parámetro extra
if(isset($_GET['name'])){ //Parámetro extra
$S = "description_part ILIKE '%$Filter%'";
}else{
$S = "reference_part ILIKE '%$Filter%'";
}
$Query = " SELECT cod_part,
description_part, reference_part, fk_cod_measure, fk_cod_brand, price_buy, price_sale, stock_minimum, stock_maximum, stock_real, fk_cod_model, fk_cod_state, fk_cod_supplier, FROM part WHERE $S ";
$FetchArray = $Conn->Query($Query);
while($row = $Conn->FetchArray($FetchArray)){
$rowB = $Conn->FetchArray($Conn->Query(" SELECT * FROM brand WHERE cod_brand='".$row[4]."' AND type_brand = 'REPUESTO' "));
echo $row[1]."|".$row[2]."|".$row[0]."|".$row[3]."|".$rowB[1]."|".$row[6]."\n"; //Todos los necesarios según lo que se tiene en la base de datos
}
}
?>
Ahora puedes tener ese tipo de buscadores interesantes en tus aplicaciones web. Comparte este enlace.