Ir para conteúdo
Fórum Script Brasil
  • 0

Abrir URL ao selecionar item do banco de dados no input de busca


Aureo Yamanaka

Pergunta

Ola, tenho uma dúvida que já pesquisei muito e não consigo achar a solução.

Tenho um campo de busca no site que é auto completado pelo banco de dados.
Faço a consulta conforme o usuário começa digitar o produto. No entanto, ao selecionar um dos itens que aparecem eu não consigo fazer abrir a página correspondente ao item.
A tabela do banco tem 3 campos:  id,  nome do produto, url da página do produto.
Eu consigo trazer o nome do produto pro input que é o primeiro passo, mas não consigo fazer abrir a url dele.

O PHP que faz o select e joga o item no input é o seguinte:

 

<?php
include_once './conexao.php';

$busca = filter_input(INPUT_GET, 'term', FILTER_SANITIZE_STRING);

//SQL para selecionar os registros

$result_msg_busca = "SELECT * FROM produtos WHERE produto LIKE '%".$busca."%' ORDER BY produto ASC LIMIT 7";

//Seleciona os registros

$resultado_msg_cont = $conn->prepare($result_msg_busca);
$resultado_msg_cont->execute();

while($row_msg_cont = $resultado_msg_cont->fetch(PDO::FETCH_ASSOC)){
    $data[] = $row_msg_cont['produto'];
    $datal[] = $row_msg_cont['url'];
}

echo json_encode($data);
?>

Eu uso o $data no echo json_encode para trazer os itens conforme o usuário digita.
Mas não consegui fazer abrir o url presente no $datal, tentei concatenar no echo formando um a href, mas claro que não funciona e ele vem o código todo escrito pro input.

O html da página é simples, e a conexão com o banco é PDO.

o HTML:
 

<DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>TESTE BUSCA</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    </head>
    <body>
        <h1> Pesquisar </h1>
        <form method="POST" action="">
            <label> Produto </label>
            <input type="text" placeholder="Escreva o nome do produto." name="busca" id="busca">
        </form>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="js/jqueryui/1.12.1/jquery-ui.min.js"></script>  
    
    <script>
        $(function(){
            $("#busca").autocomplete({
                source: 'busca_msg.php'
            });
        });       
    </script>
    </body>
</html>

 Se alguém puder me ajudar, agradeço.

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0

Boa noite @Aureo Yamanaka

Já tive problema em banco de dados por que não retornava corretamente. Você já utilizou Echo para ver qual o texto que ele esta retornando do banco de dados(se tiver retornado alguma coisa).

A respeito de criar um href ou botão com o link para clicar recomento usar o AJAX para evitar re carregamento da página.

Link para o comentário
Compartilhar em outros sites

  • 0

Sim eu consigo retornar exatamente o que eu quero. Mas não sei como colocar a ação quando a pessoa selecionar um item abrir a url referente ao item. A url esta junto no banco de dados. Posso passar o link da pagina funcionando como esta agora se isso ajudar a resolver. Eu não consegui fazer abrir a url apesar de conseguir trazer ela tambem do banco.

4 minutos atrás, Alyson Ronnan Martins disse:

Boa noite @Aureo Yamanaka

Já tive problema em banco de dados por que não retornava corretamente. Você já utilizou Echo para ver qual o texto que ele esta retornando do banco de dados(se tiver retornado alguma coisa).

A respeito de criar um href ou botão com o link para clicar recomento usar o AJAX para evitar re carregamento da página.

Se puder me dar uma luz com isso eu agradeço.

Link para o comentário
Compartilhar em outros sites

  • 0

Imagino usar o javascript, quando o item for selecionado executar um comando para abrir uma pagina.

Mais vamos dividir o problema, dependo do seu elemento HTML deve ter um evento para item selecionado, tenta dar um console.log() em javascript para ver se consegue pegar o seu evento. Depois que tiver pegando o evento vamos para abrir uma página.

A questão deve ruim porque você deve estar usando um input e não uma lista de seleção... mais isso é para depois, olha se consegue o evento em seu campo.

Editado por Alyson Ronnan Martins
Link para o comentário
Compartilhar em outros sites

  • 0
25 minutos atrás, Alyson Ronnan Martins disse:

Imagino usar o javascript, quando o item for selecionado executar um comando para abrir uma pagina.

Mais vamos dividir o problema, dependo do seu elemento HTML deve ter um evento para item selecionado, tenta dar um console.log() em javascript para ver se consegue pegar o seu evento. Depois que tiver pegando o evento vamos para abrir uma página.

A questão deve ruim porque você deve estar usando um input e não uma lista de seleção... mais isso é para depois, olha se consegue o evento em seu campo.

Então. não sei se seria maid adequado uma lista. Mas normalmente as buscas dentro do site são feitas em inputs.

Se não for muito incomodo veja aqui no link. 

https://www.nordbrasil.com.br/testbusca

 

Se voce digitar por exemplo barra ele busca todas. Eu consigo até printar a url da pagina que deveria entrar junto com cada item, mas eu quero que entre na url caso seja clicado em algum item, mas eu não preciso mostrar a url e sim direcionar o user pra ela caso ele clique em um dos produtos que vem do meu db.

Editado por Aureo Yamanaka
Completar a resposta
Link para o comentário
Compartilhar em outros sites

  • 0

Eu estou iniciando com isso e nunca coloquei no github. Mas posso tentar. Posso anexar todos os arquivos da pagina que voce viu tambem aqui. São apenas 4 arquivos com poucas linhas. 

26 minutos atrás, Alyson Ronnan Martins disse:

Tem como colocar seu projeto no Github para eu abrir e olhar? Assim eu faço alteração e já teste e te mando agora.

Não sei se fiz certo mas segue: https://github.com/Sanozukez/Busca-interna-de-produtos-com-PHP-MYSQL.git

Link para o comentário
Compartilhar em outros sites

  • 0

Já faz um ano que tento resolver esse problema, mas ainda não consegui.

Encontrei uma solução quebra galho, ele é meio lento. Encontrei um exemplo bonito e rápido, ele funciona só dando um espaço na caixa de busca, mas não consegui repetir a mesma experiência no notebook.

O exemplo que segue tem duas referências a CSS (tem um style.css, eu copiei de algum canto da internet e coloquei no meu diretório principal). Eu acho estranho esses dois arquivos, mas o programa não funciona se eles não estiverem por lá.

 

astudy.php
------------------------------------------------------------

<?php
$tagi=[["maçã","www.apple.com"],["televisão","www.nhk.jp"],["diversão","www.netfix.com"]];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(function () {
function setSiteByProduct(prod, values) {
    for (var i = 0, len = values.length; i < len; i++) {
      if (values[i][0] == prod) {
        $('#site').val(values[i][1]);
        break;}}}

  tagi=<?=json_encode($tagi)?>;

  $("#produto, #site").autocomplete({
    source: tagi.map(function(val){return val[0]}),
    select: function (event, ui) {
      setSiteByProduct(ui.item.value, tagi);}});});
</script>
</head>
<body>

<input id=produto>
<p>
<input id=site>
 
 
</body>
</html>

 

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...