jQuery autocomplete shows no options

Question

Description

---

Need: I need to make an autocomplete with jQuery, PHP and from what was selected, caught the ID, I make a query in the database and display what I need.

---

Problem: I’m having trouble displaying the records on input which 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"
}
]

Observing: I believe that the JSON that is correct.

Can someone help me with that?

Answer 1

According to the plugin documentation, you need 2 fields (I assume mandatory) in the JSON object:

An array of Objects with label and value properties:
Translated: An array of objects with properties label and value

So your JSON has to be changed/completed to be, for example, like:

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

Regarding the server-side part. I suggest that JSON be passed via ajax. Or before the autocomplete be attached to the input to the source is already assigned, or focus of 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 the focus shoots:

$.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)

Answer 2

The problem is that the source: jQuery Autocomplete UI requires an array of strings and not a JSON, see how it would be functional:

First you’d 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

Answer 3

The link below presents a great solution for what you need:

http://www.a2zwebhelp.com/bootstrap-autocomplete

The solution presented uses the Bootstrap interface. I hope it helps.