I'm working with an autocomplete but it only shows me one result in the dropdown.
The JSON format is like this:
"Registro": [
{
"attributes": {
"codigo": "000427",
"nodeValue": ""
},
"AR_DENO": "Aluminio",
"AR_LER": "200140",
"AR_PVP": {
}
},
{
"attributes": {
"codigo": "000687",
"nodeValue": ""
},
"AR_DENO": "Viruta de Aluminio",
"AR_LER": "200140",
"AR_PVP": {
}
}
the code is as follows:
<script type="text/javascript">
$(document).ready(function () {
$(document).on('keydown', '.nombre', function () {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
$('#' + id).autocomplete({
source: function (request, response) {
$.ajax({
url: "articulosXMLjson.php?empresa=acme&familias=01?02?03?04?05?06?07?08?080?13?21",
type: 'get',
dataType: "json",
data: {
search: request.term
},
success: function (data) {
console.log(data);
response($.map(data, function (item) {
return {
label: data["Registro"][0].AR_DENO +
" " + data["Registro"][0].AR_LER,
ler: data["Registro"][0].AR_LER,
pvp: data["Registro"][0].AR_PVP,
value: data["Registro"][0]["attributes"].codigo
};
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + " " + errorThrown);
}
});
},
select: function (event, ui) {
$(this).val(ui.item.label); // display the selected text
var codigo = ui.item.value; // selected id to input
// AJAX
$.ajax({
url: 'articulosXMLjson.php?empresa=acme&familias=01?02?03?04?05?06?07?08?080?13?21',
type: 'get',
data: {
codigo: codigo
},
dataType: 'json',
success: function (response) {
console.log(response);
var id = ui.item.value;
var nombre = ui.item.label;
var ler = ui.item.ler;
document.getElementById('ler_' + index).value = ler;
}
});
return false;
}
});
});
// Add more
$('#addmore').click(function () {
// Get last id
var nombre_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = nombre_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><input type='text' class='nombre' id='nombre_" + index +
"' placeholder='Nombre Artículo'></td><td><input type='text' class='ler' id='ler_" +
index + "' ></td></tr>";
// Append data
$('tbody').append(html);
});
});
</script>
<input type='button' value='Añadir linea' id='addmore'>
<table border='1' style='border-collapse: collapse;'>
<thead>
<tr>
<th>Nombre Artículo</th>
<th>LER</th>
</tr>
</thead>
<tbody>
<tr class='tr_input'>
<td>
<input type='text' class='nombre' id='nombre_1' placeholder='Nombre artículo'>
</td>
<td>
<input type='text' class='ler' id='ler_1'>
</td>
</tr>
</tbody>
</table>