7

Tenho dois inputs, estou usando o automplete em apenas um. O código do autocomplete:

$(document).ready(function() {
$.getJSON('include/funcoes/carrega_cidades.php', function(data){
var dados = [];

        $(data).each(function(key, value) {
            dados.push(value.name);
        });

        $('#cidade').autocomplete({ source: dados, minLength: 3});
    });
});

cidade é o input que tem o autocomplete e está retornando normalmente. Preciso trazer para outro input o id_cidade, o ID da cidade retornada no autocomplete.

SQL:

    $pdo = new PDO("mysql:host=localhost; dbname=iboard; charset=utf8;", "root", "");
$dados = $pdo->prepare("

        SELECT
            id,name
        FROM
            cidade

    ");
$dados->execute();
echo json_encode($dados->fetchAll(PDO::FETCH_ASSOC));

Como posso fazer isso?

2 Respostas 2

3
+50

Simples, no jQuery UI, para você ter o valor pesquisado no banco sendo exibido na lista gerada pelo autocomplete, você não precisa usar sempre um array de string, mas pode usar um array de objetos, desde o mesmo possua o atributo label como o valor desejado para exibição na lista gerada pelo autocomplete.

Por exemplo:

 ['wallace', 'rray', 'bigown']

Pode ser utilizado como:

[{label: 'wallace', id: 1}, {label: 'rray', id: 2}]

Sendo assim, você pode acessar outros atributos através do ui.item.

Exemplo:

$.getJSON('include/funcoes/carrega_cidades.php', function(data){

    var dados = [];

        $(data).each(function(key, value) {
            dados.push({label: value.name, id: value.id});
        });

        $('#cidade').autocomplete({ 
            source: dados,
            minLength: 3,
            select: function (event, ui) {
                  if (ui.item && ui.item.id) {
                     $("#cidadeID").val(ui.item.id);
                  return false;
               }
           },

        });
    });
});
1
  • +1 Cade meu nome no array ? HSUAHSAUS Commented 5/01/2016 às 15:33
0
  1. Em vez de pegar os dados apenas do nome da cidade, coloque no vetor o objeto da cidade.
  2. Aponte esse vetor como source dos dados
  3. Inclua um metodo que será chamado ao escolher um item
  4. Sobre carregue a função de renderização do autocomplete falando pra ele que voce quer mostrar o campo "name" do objeto

Ficará assim:

$.getJSON('include/funcoes/carrega_cidades.php', function(data){
    var dados = data;
    $('#cidade').autocomplete({ source: dados, minLength: 3,
       select: function (event, ui) {
            if (ui.item && ui.item.id){
                 $("#cidadeID").val(ui.item.id);
                 return false;
            }
       }
    }).autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $("<li>").append(item.name).appendTo(ul);
    };
});

Referência: JQUERY UI Doc's

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .