7

Fala ae galera tudo bem! To fazendo uma aplicação que recupera cidades de um webservice em SOAP, minha aplicação já está toda ok, com as consultas, porem estou tentando implantar agora um autocomplete, e venho tendo algumas dificuldades com meu "source" do jquery-ui, os dados retornados estão corretos para o source tratar as informações, porem o autocomplete não associa oque estou pesquisando e exibe a lista toda de resultados. Tentei criar uma função para fazer a consulta ao webservice e armazenar o resultado em uma variavel, para eu usar somente a var dentro do source, mas não deu certo passar uma função externa dentro do source. segue me código pra ver se alguem da um help!

$(".j_destino").autocomplete({
    minLength: 2,
    source: function (request, response) {
        $.ajax({
            url: "_cdn/ajax/destino.php",
            dataType: "json",
            type: 'POST',
            data: {action: 'searchCity'},
            success: function (resposta) {
                response(resposta.dados);
                console.log(response);
            }
        });
    },
    focus: function (event, ui) {
        $(".j_destino").val(ui.item.city);
        return false;
    },
    select: function (event, ui) {
        $(".j_destino").val(ui.item.city);
        $(".j_CityId").val(ui.item.id);
        return false;
    }
}).autocomplete("instance")._renderItem = function (ul, item) {
    return $("<li>").append("<a>" + item.city + "</a>").appendTo(ul);
};

Esta seria a versão alternativa e mais otimizada para fazer isso porém não estou acertando algo.

    function carregaDados() {
        $.ajax({
            url: "_cdn/ajax/destino.php",
            dataType: "json",
            type: 'POST',
            data: {action: 'searchCity'},
            success: function (resposta) {
                response(resposta.dados);
            }
        });
    }

    $(".j_destino").autocomplete({
        minLength: 3,
        source: carregaDados(),
        focus: function (event, ui) {
            $(".j_destino").val(ui.item.city);
            return false;
        },
        select: function (event, ui) {
            $(".j_destino").val(ui.item.city);
            $(".j_CityId").val(ui.item.id);
            return false;
        }
    }).autocomplete("instance")._renderItem = function (ul, item) {
        return $("<li>").append("<a>" + item.city + "</a>").appendTo(ul);
    };

Esse seria meu PHP

<?php
session_start();
$getPost = filter_input_array(INPUT_POST, FILTER_DEFAULT);
$setPost = array_map('strip_tags', $getPost);
$post = array_map('trim', $setPost);

$Action = $post['action'];
$jSon = [];
unset($post['action']);
//sleep(1);

if ($Action):
    require('../../_app/Config.inc.php');

    $jSon['dados'] = null;
endif;

switch ($Action):
    case 'searchCity':
        $cidades = new pegarCidade;
        $cidades->getListaDeCidades();
        if ($cidades->getResult()):
            foreach ($cidades->getResult() as $key):
                 $jSon['dados'][] = ['id' => $key->CityId, 'city' => $key->CityNamePT];
            endforeach;
        endif;
        break;   

    default:
        $jSon['error'] = "Erro ao selecionar a ação!";
endswitch;

echo json_encode($jSon);

1
  • Ao que tudo parece vc não colocou a biblioteca do jquery. Ou ao menos não na ordem correta. 12/07/2016 às 13:35

2 Respostas 2

0

Olá,

o problema é que você parece não estar passando o termo a ser pesquisado para o php tente algo como:

$("#auto_id").autocomplete( {
    source: function(request,response) {

        $.ajax ( {
          url: "_cdn/ajax/destino.php",
          type:'POST',
          data: {term: request.term,action: 'searchCity'},
          dataType: "json",
          success: function(data) {
            //what goes here?
                 } 
    }) }
});

e então no php você consegue o valor do termo digitado no $_POST['term']

5
  • Mas aí no php eu tenho q fazer um if ==, diferente do LIKE do sql, aí o retorno só viria se digitar o term completo. 13/07/2016 às 17:41
  • Qual a fonte destas informações ? As cidades no caso, vem de um banco de dados ? 13/07/2016 às 17:49
  • Não, elas vem da consulta do webservice Soap, aí eu armazeno em cache, o no caso como estou em testes, deixo na sessão. 14/07/2016 às 22:02
  • Dá uma olhada nesse exemplo. 21/05/2021 às 1:42
  • Ou veja esse outro exemplo. 21/05/2021 às 1:47
-4

Experimente carregar os seus dados vindos da API em uma "Datalist" amigo, imagino que o usuário irá interagir com isso certo rsrs? (pergunto pois vc não postou o seu HTML), nesse caso acredito ser válida a utilização dela tendo em vista a facilidade de uso, e é aceita em todos os navegadores:

https://www.w3schools.com/tags/tag_datalist.asp

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 .