tengo un problema, estoy tratando de combinar un autocompletado con una tabla dinamica, es decir, tengo una tabla que con un boton agrega filas, pero no puedo hacer para que el autocompleado funcione con las filas que se crean, solo sirve con la primera y las demas no. esto es lo que tengo espero me puedan ayudar
producto.php
Código PHP:
$conexion = new mysqli('localhost','root','','inventario_db');
$matricula = $_POST['matricula'];
$consulta = "select producto, costo FROM invent_1 WHERE id_invent = '$matricula'";
$result = $conexion->query($consulta);
$respuesta = new stdClass();
if($result->num_rows > 0){
$fila = $result->fetch_array();
$respuesta->producto = $fila['producto'];
$respuesta->cost = $fila['costo'];
}
echo json_encode($respuesta);
buscar producto
Código PHP:
<?php
$conexion = new mysqli('localhost','root','','inventario_db');
$matricula = $_GET['term'];
$consulta = "select id_invent FROM invent_1 WHERE id_invent LIKE '%$matricula%'";
$result = $conexion->query($consulta);
if($result->num_rows > 0){
while($fila = $result->fetch_array()){
$matriculas[] = $fila['id_invent'];
}
echo json_encode($matriculas);
}
?>
Código PHP:
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("","");
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html(""+total);
$('#total').html(""+total);
update_balance();
}
function update_balance() {
var due = $("#total").html().replace("","") - $("#paid").val().replace("","");
due = roundNumber(due,2);
$('.due').html(""+due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("","") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(""+price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
var abs=0;
$("#addrow").click(function(){
abs++;
$(".item-row:last").after('<tr class="item-row" ><td class="item-name"><div class="delete-wpr"><input type="text" id="matricula'+abs+'" name="matricula'+abs+'" value=""/><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><input type="text" id="producto'+abs+'" name="producto'+abs+'" value=""/></td><td><input type="text" class="cost" name="cost" id="cost"/></td><td><input type="text" class="qty"/></td><td><span class="price"></span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(document).keypress(function(){
$( "#matricula" ).autocomplete({
source: "nueva/buscarproducto.php",
minLength: 1
});
$("#matricula").keypress(function(){
$.ajax({
url:'nueva/producto.php',
type:'POST',
dataType:'json',
data:{ matricula:$('#matricula').val()}
}).done(function(respuesta){
$("#producto").val(respuesta.producto);
$("#cost").val(respuesta.cost);
});
});
});
$(".delete").live('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
Código HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autocompletado de Mutiples campos Usando jQuery , Ajax , PHP y MySQL</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#codigo").autocomplete({
source: "productos.php",
minLength: 2,
select: function(event, ui) {
event.preventDefault();
$('#codigo').val(ui.item.codigo);
$('#descripcion').val(ui.item.descripcion);
$('#precio').val(ui.item.precio);
$('#id_producto').val(ui.item.id_producto);
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
Codigo: <input id="codigo">
Producto: <input id="descripcion" readonly>
Precio: <input id="precio" readonly>
<input type="hidden" id="id_producto">
<p>Ingresa 00</p>
</div>
</body>
</html>