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?

 6
Author: BOT K3nny, 2014-02-22

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 )

 2
Author: Sergio, 2014-02-22 08:38:54

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

 1
Author: Paulo Roberto Rosa, 2020-06-11 14:45:34

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.

 -2
Author: anderson, 2014-02-24 23:57:16