Autocomplete jQuery does not show options

6

Description

Need: Need to autocomplete with jQuery , PHP and from what was selected, I get ID , query the database, and display what I need .

Problem: I'm not able to display the records in input that loads 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?

    
asked by anonymous 22.02.2014 / 03:53

3 answers

2

According to the plugin documentation, you need 2 fields (I infer that required) in the JSON object:

  

An array of objects with label and value properties: / strong> An array of objects with 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

Regarding the server side part. I suggest that JSON be passed via ajax. Or before autocomplete is grabbed at input for source already assigned, or at focus of input:

$("#consulta_estoque").on('focus', function(){
    json = json.concat(json2); // aqui seria um pedido ajax
    $("#consulta_estoque").autocomplete({source: json});
});

Sample version using ajax, called when focus triggers:

$.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 recent uncovered jsontest.com )

    
22.02.2014 / 09:16
1

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

First you would have to put descricaoProduto in an array, and then you set it to 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

    
22.02.2014 / 04:21
-2

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

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

The solution presented uses the Bootstrap interface. Hope it helps.

    
25.02.2014 / 00:57