Autocomplete com Ajax

Estou no começo de php e gostaria de fazer ao digitar o input aparece os campos do banco de dados ai eu completaria com outras informações da tabela

produto

id_produto nome_produto valor

1 lapis 0,50

2 caneta 0,70

3 caderno 3,00

formulario

<script>
$(document).ready(function(){
 $("#nome_produto").autocomplete("autocomplete.php", {

selectFirst: true

});
});
</script>

<label>nome do produto:</label>
 <input name="nome_produto" type="text" id="nome_produto" size="20"/><br><br>
<label>valor:</label>
 <input name="valor" type="text" id="valor" size="20"/>
 ao digitar o nome do produto e clicalo aparecera o valor tambem

so consigo fazer aparecer o nome do produto mais nao sei fazer o valor

autocomplete.php

<?php
$q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
$mysqli=mysqli_connect('localhost','root','','loja') or die("Database Error");
$sql="SELECT * FROM produto WHERE nome_produto LIKE '%$my_data%' ORDER BY nome_produto";
$result = mysqli_query($mysqli,$sql) or die(mysqli_error());

if($result)

{ while($row=mysqli_fetch_array($result)) {

echo $row['nome_produto']."\n";
}
}
?>