estoy aramando un formulario para ingresar items a una lista de productos con precios y cantidad, el problema que tengo es que en la descripcion no puedo agregar el autocomplete para poder jalar el nombre del item.
ejemplo:
tecleo lap... y me sale la lista del auto complete escojo el producto y sale en otra casilla el precio.
se clona el formulario y se muestra, pero no puedo adicionarle el automplete() al input #item-description, he tratado por todos los medios y nada y supongo que darle el valor sera igual de complicado :S
podrian ayudarme.
muchisimas gracias de antemano.
Código:
<html>
<head>
<meta charset="utf-8">
<title>Items</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="/sis/admin-media/jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
var new_dialog = function (type, row) {
var dlg = $("#dialog-form2").clone();
var iquant = dlg.find(("#item-quantity")),
idescrip = dlg.find(("#item-description")),
iprice = dlg.find(("#item-price")),
itotal = dlg.find(("#item-total"));
/*
idescrip.appendTo(autocomplete({
source: "items.php",
minLength: 1
}));
*/
type = type || 'Create';
var config = {
autoOpen: true,
height: 400,
width: 350,
modal: true,
open: function () {
$("#item-description").autocomplete({
source: "states_abbrev.php",
minLength: 1
});
},
buttons: {
"Agregar Producto": save_data,
"Cancel": function () {
dlg.dialog("close");
}
},
close: function () {
dlg.remove();
}
};
if (type === 'Edit4') {
config.title = "Editar Producto";
get_data();
delete (config.buttons['Agregar Producto']);
config.buttons['Editar Producto'] = function () {
row.remove();
save_data();
};
}
dlg.dialog(config);
function get_data() {
var _iquant = $(row.children().get(0)).text(),
_idescrip = $(row.children().get(1)).text(),
_iprice = $(row.children().get(2)).text(),
_itotal = $(row.children().get(3)).text();
iquant.val(_iquant);
idescrip.val(_idescrip);
iprice.val(_iprice);
itotal.val(_itotal);
}
function save_data() {
// calculo total
var cant = iquant.val();
var pto = iprice.val();
var totalItem = cant * pto;
$("#items tbody").append("<tr>" +
"<td>" + iquant.val() + "</td>" +
"<td>" + idescrip.val() + "</td>" +
"<td>" + iprice.val() + "</td>" +
"<td>" + totalItem + "</td>" +
"<td><a href='' class='editx'>Editar</a></td>" +
"<td><span class='delete'><a href=''>Borrar</a></span></td>" +
"</tr>");
dlg.dialog("close");
}
}; // end dialog
$(document).on('click', 'span.delete2', function () {
$(this).closest('tr').find('td').fadeOut(1000,
function () {
// alert($(this).text());
$(this).parents('tr:first').remove();
});
return false;
});
$(document).on('click', 'td a.editx', function () {
new_dialog('Edit4', $(this).parents('tr'));
return false;
});
$("#add-item").button().click(new_dialog);
});
</script>
<style type="text/css">
body {
/* font-size: 62.5%; */
}
label, input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td, div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
#dialog-form, #dialog-form2 {
display: none;
}
div#items-contain {
/* width: 350px; */
margin: 20px 0;
}
table#items{
width: 100%;
}
</style>
</head>
<body>
<div id="dialog-form2" title="Ingresar Producto">
<form>
<fieldset>
<label for="item-quantity">
Cantidad</label>
<input type="text" name="item-quantity" id="item-quantity" value="" class="text ui-widget-content ui-corner-all" />
<label for="item-description">
Descripción</label>
<input type="text" name="item-description" id="item-description" value="" class="text ui-widget-content ui-corner-all" />
<label for="item-price">
P. Unit.</label>
<input type="text" name="item-price" id="item-price" value="" class="text ui-widget-content ui-corner-all" />
<label for="item-total">
P. Total.</label>
<input type="text" name="item-total" id="item-total" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="items-contain" class="ui-widget">
<h1>
Items</h1>
<table id="items" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Cant. </th>
<th>Descripción </th>
<th>P. Unit.</th>
<th>P. Total.</th>
<th colspan="2"> Operaciones</th>
</tr>
</thead>
<tbody>
<tr>
<!-- Lista de Items //-->
</tbody>
</table>
</div>
<button id="add-item">
Ingresar Item</button>
</body>
</html>