Skip to content

Instantly share code, notes, and snippets.

@ViCMAP

ViCMAP/autocompletado.html

Last active August 29, 2015 14:14
Show Gist options
  • Save ViCMAP/4d6b8462af96f91a9144 to your computer and use it in GitHub Desktop.
Save ViCMAP/4d6b8462af96f91a9144 to your computer and use it in GitHub Desktop.
Download ZIP
Autocompletado utilizando jQuery Autocomplete para mostrar listado de productos en tres columnas y con una cabecera.
Raw
autocompletado.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de autocompletado con columnas y cabecera</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="http://http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
var productos = [
{
codigo: "[00001]",
costo: "50.00",
label: "Cerveza One",
producto_id: "1",
tipo_producto: "Bebidas Alcoholicas",
value: "Cerveza One"
},
{
codigo: "[00002]",
costo: "150.00",
label: "Cerveza Presidente",
producto_id: "2",
tipo_producto: "Bebidas Alcoholicas",
value: "Cerveza Presidente"
},
{
codigo: "[00003]",
costo: "200.00",
label: "Cerveza Stella",
producto_id: "3",
tipo_producto: "Bebidas Alcoholicas",
value: "Cerveza Stella"
}
];
$( document ).ready(function() {
var i = 0;
$("#producto").bind( "keydown", function( event ) {
i = 0;
}).autocomplete({
//source: "../../funciones/funciones_ajax.php",
source: productos,
minLength: 1,
select: function(event, ui) {
$("#producto").val(ui.item.value);
//$("#costo").val(ui.item.costo);
//$("#producto_id").val(ui.item.producto_id);
//$("#cantidad").val("");
//$("#cantidad").focus();
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
var elemento = $("<a></a>");
$("<span class='p-codigo'></span>").text(item.codigo).appendTo(elemento);
$("<span class='p-nombre'></span>").text(item.value).appendTo(elemento);
$("<span class='p-tipo_producto'></span>").text(item.tipo_producto).appendTo(elemento);
(i > 0)? '' : ul.prepend('<li class="ui-title" role="presentation"><span class="h-codigo">Codigo</span><span class="h-nombre">Nombre del producto</span><span class="h-tipo_producto">Categoria</span></li>');
i++;
return $("<li></li>").append(elemento).appendTo(ul);
};
});
</script>
<link href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.p-codigo, .p-tipo_producto {
color: white;
border-radius: 2px;
padding: 0.2em;
}
.ui-autocomplete .p-codigo {
float: left;
font-size: smaller;
background: #16a765;
}
.ui-autocomplete .p-nombre {
margin-left: 0.5em;
}
.ui-autocomplete .p-tipo_producto {
margin-left: 0.5em;
float: right;
font-size: smaller;
background: #428bca;
}
.ui-title{
background-color:#ccc;
height: 2em;
font-size: smaller;
font-weight: bold;
border-radius: 2px;
padding-top: 0.4em;
}
.ui-title .h-codigo{
padding-left: 0.7em;
}
.ui-title .h-nombre {
margin-left: 1em;
}
.ui-title .h-tipo_producto {
margin-right: 0.6em;
float: right;
}
</style>
</head>
<body>
<input class="form-control" name="producto" id="producto">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment