JQuery Autocomplete does not show options
Description
Need: need to make an autocomplete with jQuery
, PHP
and from what was selected, I take the ID
, make a query in the database and display what I need.
Problem: I am not being able to display the records on input
that loads the autocomplete. Note the code below Javascript
.
JavaScript (jQuery)
$( "#consulta_estoque" ).autocomplete({
source: 'js/autocomplete.php',
select: function(event, ui){
$( "#consulta_estoque" ).val(ui.item.descricaoProduto);
alert(ui.item.codigoFabrica);
}
});
PHP
foreach ($sql as $res) {
$resultado[] = $res;
}
echo json_encode($resultado);
JSON
[
{
"codProduto":"9",
"codigoFabrica":"8019077",
"codSubcategoria":"0",
"descricaoProduto":"WWAKS3-5\/S366 CONECTOR M12 EUROFAST ANGULAR FEMEA",
"tipoItemEstoque":"0",
"c7flex":"9",
"ncmProduto":"85444200"
},{
"codProduto":"39",
"codigoFabrica":"8019078",
"codSubcategoria":"0",
"descricaoProduto":"WWAKS3-10\/S366 CONECTOR M12 EUROFAST ANGULAR MACHO",
"tipoItemEstoque":"0",
"c7flex":"39",
"ncmProduto":"0"
}
]
Note: I believe JSON
is correct.
Can anyone help me with this?
3 answers
According to the plugin documentation, it takes 2 fields (I deduce that required) in the JSON object:
An array of objects with label - and - value details:
Translated to: An array of objects with properties label and value
So your JSON has to be changed/completed to be, for example, like this:
var json = [{
"label": "EUROFAST ANGULAR FEMEA",
"value": "8019077",
"codProduto": "9",
"codigoFabrica": "8019077",
"codSubcategoria": "0",
"descricaoProduto": "WWAKS3-5\/S366 CONECTOR M12 EUROFAST ANGULAR FEMEA",
"tipoItemEstoque": "0",
"c7flex": "9",
"ncmProduto": "85444200"
}, {
"label": "EUROFAST ANGULAR MACHO",
"value": "8019078",
"codProduto": "39",
"codigoFabrica": "8019078",
"codSubcategoria": "0",
"descricaoProduto": "WWAKS3-10\/S366 CONECTOR M12 EUROFAST ANGULAR MACHO",
"tipoItemEstoque": "0",
"c7flex": "39",
"ncmProduto": "0"
}]
JsFiddle
In relation to the server-side part. I suggest that JSON be passed via ajax. Either before the autocomplete
is clamped to the input
for the source
to be already assigned, or else in the focus
of the input:
$("#consulta_estoque").on('focus', function(){
json = json.concat(json2); // aqui seria um pedido ajax
$("#consulta_estoque").autocomplete({source: json});
});
Example version using ajax, called when focus
Fires:
$.ajax({
type: 'GET',
url: 'js/autocomplete.php',
dataType: 'jsonp',
success: function (resposta) {
var json = resposta;
$("#consulta_estoque").autocomplete({source: json});
}
});
JSFiddle with ajax (using the recently discovered jsontest.com )
The problem is that the source:
of jQuery Autocomplete UI needs an array of strings and not a JSON, here's how it would work:
First you would have to put descricaoProduto
in an array, and then Arrow it as source
:
$.getJSON('js/autocomplete.php').done(function (dados) {
// Cria uma array adaptada ao plugin:
var dadosAdaptados = $.map(dados, function (elemento) {
return {
label: elemento.descricaoProduto,
value: elemento.codigoFabrica
};
});
// Configura o autocomplete:
$( "#consulta_estoque" ).autocomplete({
source: dadosAdaptados,
select: function (event, ui) {
// Usa os dados conforme necessário:
$( "#consulta_estoque" ).val(ui.item.label);
alert('Código de fábrica:' + ui.item.value);
}
});
This way it works, so you have to separate your JSON into an array.
Example in JSFiddle
The link below presents a great solution for what you are needing:
http://www.a2zwebhelp.com/bootstrap-autocomplete
The solution presented uses the Bootstrap interface. I hope it helps.