1

fala pessoal, é o seguinte eu tenho um script de pesquisa com php, eu gostaria de quando ele exibisse o resultado as propriedades da palavra pesquisada fossem alteradas(background, tamanho, etc), por exemplo eu pesquiso o nome de usuario 'joao' o sistema me retorna uma tabela com os resultados referentes só que invés de me mostrar o resultado normal o sistema alteraria o background da palavra que foi pesquisada, bom o problema é o seguinte eu não sei se consigo, ou devo fazer isso só com php, ou devo utilizar javascript, lembrando que não estou pedindo nenhum código pronto e sim o "melhor caminho"

segue o código de como os resultados da consulta são exibidos

while ($linha = $query->fetch(PDO::FETCH_ASSOC)) {

                                        echo '<tr class="odd gradeX">';
                                        echo '<td>' . $linha['NOME'] . '</td>';
                                        echo '<td>' . $linha['EMAIL'] . '</td>';
                                        echo '<td>' . $linha['LOGIN'] . '</td>';
                                        echo '<td>' . $linha['DT_NASCIMENTO'] . '</td>';
                                        echo '<td>' . $linha['DT_ULTIMOACESSO'] . '</td>';
                                        echo '<td>' . $linha['IP'] . '</td>';
                                        echo '</td>';

                                    }

o código acima gera os resultados desta tabela exemplo

7
  • Sinceramente chará eu não consegui entender o que você quer dizer com background? Você quer destacar as palavras?
    – Syzoth
    Commented 24/12/2014 às 14:09
  • realmente acho que me expressei mal, e basicamente isso como acontece no duckduckgo.com quando você pesquisa sobre algo ele deixa em negrito o termo
    – wwwjsw
    Commented 24/12/2014 às 14:11
  • Qual variável é recebida pela "querie" do PDO? Forneça um código mais completo, não tem como saber o que é necessário modificar. Leia isto por favor: pt.stackoverflow.com/help/mcve
    – Syzoth
    Commented 24/12/2014 às 14:11
  • 1
    opa @GuilhermeNascimento desculpa pela demora em marcar como correta havia esquecido, obrigado pela ajuda chara
    – wwwjsw
    Commented 10/04/2015 às 17:52
  • 1
    Que bom que pude ajudar, desejo sucesso a você e aos seus projetos chara. +1 pra ti
    – Syzoth
    Commented 10/04/2015 às 17:53

1 Resposta 1

6

Supondo que você utilize uma query assim SELECT * FROM tabela WHERE NOME LIKE ? OR EMAIL LIKE ? e uma variável dentro da global chamada $_GET, o melhor caminho seria criar uma função para fazer o efeito combinado ao CSS, seria algo como:

function highlightResult($str, $keyword) {
    return str_replace($keyword, '<strong class="destaque">' . $keyword . '</strong>', $str);
}

O str_replace busca todas os locais com a palavras consultada dentro da string e adiciona a tag <strong class="destaque">, assim poderemos aplicar um efeito usando CSS

Segue um exemplo de uso:

<?php
function highlightResult($str, $keyword) {
    return str_replace($keyword, '<strong class="destaque">' . $keyword . '</strong>');
}

if (isset($_GET['consulta'])) {//Presumindo que o nome da variável seja consulta
    $consulta = $_GET['consulta'];
    $sth = $dbh->prepare('
        SELECT * FROM tabela WHERE NOME LIKE ? OR EMAIL LIKE ?
    ');
    $busca = array('%' . $consulta . '%', '%' . $consulta . '%');
    $sth->execute($busca);

    while ($linha = $sth->fetch(PDO::FETCH_ASSOC)) {
        echo '<tr class="odd gradeX">';
        echo '<td>',  highlightResult($linha['NOME'], $consulta), '</td>'; //Adiciona efeito de destaque na primeira coluna
        echo '<td>',  highlightResult($linha['EMAIL'], $consulta) '</td>'; //Adiciona efeito de destaque na segunda coluna
        echo '<td>',  $linha['LOGIN'], '</td>';
        echo '<td>',  $linha['DT_NASCIMENTO'], '</td>';
        echo '<td>',  $linha['DT_ULTIMOACESSO'], '</td>';
        echo '<td>',  $linha['IP'], '</td>';
        echo '</td>';
    }
} else {
    ...
}

O CSS deve ser algo como (modifique conforme a sua necessidade):

strong.destaque {/*Strong já possui um efeito parecido com o negrito*/
   color: red; /*modifique a cor conforme necessário*/
}

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 .