Mudando cor de link retornado de busca jquery

[Willians Magán 0]

Boa tarde,

 

Tenho uma página mapa.php que retorna informação que está em um banco de dados, e tenho na mesma página um campo de busca que utiliza jquery para buscar as informações no banco, criando uma busca dinâmica (o resultado da busca vai aparecendo numa lista, conforme parâmetros digitados). Essa busca gera um arquivo buscar.php que é apresentado na página mapa.php, abaixo do campo de busca.

 

O que precisava é de uma forma de, ao passar o mouse sobre um dos itens retornados da busca, o seu respectivo link na página mapa.php mudasse de cor, para que a pessoa pudesse localizar o item pesquisado no mapa apresentado.

 

Segue parte dos códigos utilizados:

 

página mapa.php

<div id="pesquisa">
   <input type="text" id="txtPesquisa" onkeyup="getDados(this.value);" placeholder="Digite um termo para pesquisa">
   <div id="resultado"></div>
  </div>

 

<?php
   include 'class/conexao.php';
  
   $pdo=conectar();
    
   $sql = "SELECT * FROM dados";
   $stmt = $pdo->prepare($sql);
   $stmt->execute();
   
   while ($resultado = $stmt->fetch()) {
  ?>  
   <a href="#popup<?php echo $resultado->Item;?>"Informação</a>

<?php } ?>

 

 

arquivo function.js

/**
  * Função para criar um objeto XMLHTTPRequest
  */
 function CriaRequest() {
     try{
         request = new XMLHttpRequest();       
     }catch (IEAtual){
        
         try{
             request = new ActiveXObject("Msxml2.XMLHTTP");      
         }catch(IEAntigo){
        
             try{
                 request = new ActiveXObject("Microsoft.XMLHTTP");         
             }catch(falha){
                 request = false;
             }
         }
     }
    
     if (!request)
         alert("Seu Navegador não suporta Ajax!");
     else
         return request;
 }
 
 /**
  * Função para enviar os dados
  */
 function getDados() {
    
     // Declaração de Variáveis
     var texto   = document.getElementById("txtPesquisa").value;
     var result = document.getElementById("resultado");
     var xmlreq = CriaRequest();
    
     // Exibi a imagem de progresso
     //result.innerHTML = '<img src="Progresso1.gif"/>';
    
     // Iniciar uma requisição
    
  if(texto == null){} else {
  xmlreq.open("GET", "busca.php?valor=" + texto, true);
    
     // Atribui uma função para ser executada sempre que houver uma mudança de ado
     xmlreq.onreadystatechange = function(){
        
         // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
         if (xmlreq.readyState == 4) {
            
             // Verifica se o arquivo foi encontrado com sucesso
             if (xmlreq.status == 200) {
                 result.innerHTML = xmlreq.responseText;
             }else{
                 result.innerHTML = "Erro: " + xmlreq.statusText;
             }
         }
     };
     xmlreq.send(null);
  }
 }
 
 function mudacor(item){
  document.getElementById(item).style.color="#ffff00";
 }

 

arquivo busca.php

<?php
 include 'class/conexao.php';
 
 $pdo=conectar();
 
 $texto = $_GET["valor"];
 
 if($texto == "") {echo '';} else{
 $sql = "SELECT * FROM dados WHERE IdLinha LIKE concat('%', :param, '%')";
 $stmt = $pdo->prepare($sql);
 $stmt->bindParam(":param", $texto, PDO::PARAM_STR);
 $stmt->execute();
 
  if(!$stmt->rowCount() == 0)
  {
   echo '<div id="lista">';
   while ($resultado = $stmt->fetch())
   {  
    echo '<a href="#popup'.$resultado->Item.'" class="listagem">'.$resultado->IdLinha.'</a><br>';
   }
   echo '</div>';
  } else {
   echo 'Nada encontrado';
  }
 }
?>

 

 

O que precisava era que, na hora de passar o mouse em um link carregado da busca dentro da div "resultado" da página mapa.php (que é gerado pela página busca.php), a informação presente na tag <a href="#popup<?php echo $resultado->Item;?>"Informação</a> tivesse a cor alterada.

 

Obrigado.