Autocomplete Jquery

[roots_raiz 0]

Boa noite pessoal,

 

 

estou usando aqui o plugin autocomplete jQuery, quando o usuario digita no txtfield, através do ajax faço uma busca no BD, e cria-se uma lista abaixo, estilo pesquisas google.

 

eu preciso formatar a cor da letra que está sendo digitada, por exemplo: digito a letra "A", na lista abaixo ela deverá ficar com a cor amarela.

 

formatei qse toda estrutura só falta isso, caso saibam deem uma força, segue os códigos;

 

 

FUNÇÃO JAVASCRIPT


$(document).ready(function(){

$("#busca1").autocomplete("funcao_autocomplete.php", {

width: 308,
selectFirst:false

});	

});



HTML


<input name="busca1"  id="busca1" type="text" value="Ex: Advocacias, Restarantes etc..."  
onclick="this.value=''" />



CSS

.ac_results {
padding: 0px;
border: 1px solid #CCC;
background-color: white;
overflow: hidden;
z-index: 99999;

}

.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;


}

.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;

font: menu;
font-size: 12px;

line-height: 16px;
overflow: hidden;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif
}

.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}

.ac_odd {/* bg cor sim cor não */
background-color: #eee;
}

.ac_over {/* bg ativo selecionado*/
background-color: #F8C300;
color:#FFF
}

 

 

a pagina funcao_autocomplete.php, faz apenas uma busca!!

 

 

 

Obrigado!!

 

ninguém pode ajudar?

[Evandro Oliveira 331]

acabei de responder um tópico que se resolve de maneira muito similar.

 

Vamos fazer uma troca baseada em expressões regulares.

 

Tendo o seguinte HTML:

 

<p id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor nulla nulla, vel adipiscing purus. Nulla eu auctor tellus. Etiam lorem diam, aliquam non scelerisque at, venenatis vel nulla. Etiam varius orci in enim condimentum dapibus. Donec congue lobortis molestie. Duis ac laoreet purus. Integer tristique fermentum nulla, eget tempus risus sodales tincidunt. Morbi in gravida velit. Sed eu odio sapien, fringilla pulvinar nisl. Fusce id metus tellus. Phasellus adipiscing scelerisque justo at volutpat. Vivamus ultricies vehicula mi rutrum consectetur. Praesent sem elit, rhoncus in consequat pulvinar, imperdiet ut turpis. Vivamus a risus vel nulla consectetur sodales id eget odio. Integer non semper nibh. Pellentesque venenatis suscipit suscipit.
Donec sapien sem, blandit et faucibus vitae, mollis vitae purus. Nunc id turpis odio. Maecenas congue, lorem quis pharetra ultricies, felis leo volutpat dolor, tempus sodales dolor nunc et est. Phasellus sed leo pretium lorem rutrum pharetra eget eget augue. Ut tempus consectetur tempus. Quisque ornare massa eu mi commodo dapibus. Nunc luctus vulputate dolor a pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam sit amet enim ligula, eu placerat est. Donec sodales gravida varius. Nunc ut nulla eget ante mollis gravida. Duis sit amet ante id felis condimentum aliquet ac vitae ipsum. Proin rhoncus faucibus libero eget fringilla. Sed imperdiet nisi et odio blandit quis dignissim magna bibendum. Nam vitae interdum quam. Donec ut quam a massa molestie iaculis. Phasellus laoreet, dolor non hendrerit tincidunt, lacus dui auctor elit, eu malesuada magna purus eget magna. Phasellus interdum elit id metus sodales eleifend. Nullam laoreet ultrices elit, et scelerisque augue pellentesque et.
In hac habitasse platea dictumst. Nullam tellus massa, tempus vel gravida eu, facilisis id lacus. Nulla neque lectus, aliquam at pretium sed, fringilla in dui. Nam porttitor, velit ac dictum posuere, diam mi scelerisque libero, ac molestie augue dui quis ipsum. Cras id est purus, vel ullamcorper odio. Vivamus nisi lectus, eleifend id pulvinar at, volutpat id diam. Phasellus congue, quam vel faucibus tempor, nunc est scelerisque nunc, congue tincidunt elit dolor vel nunc. Maecenas pellentesque congue dolor, mollis laoreet lectus blandit sit amet. Vivamus sit amet felis lacus, quis rutrum leo. Quisque eget tellus in risus semper gravida et a metus.
In hac habitasse platea dictumst. Vestibulum commodo, ligula sit amet ultricies sagittis, metus orci tristique erat, vitae accumsan purus neque ac velit. Integer nec purus ac lectus dapibus faucibus. Donec tincidunt accumsan euismod. Morbi eget diam orci. Proin malesuada placerat dapibus. Nulla vestibulum, erat quis aliquet gravida, erat ligula dignissim ipsum, et fermentum ligula lacus id leo. Integer et nisl sed ipsum facilisis pretium volutpat nec sapien. Vestibulum viverra ante sed massa hendrerit laoreet. Sed faucibus dolor id nulla hendrerit et interdum massa interdum.
Cras porta dapibus dui in condimentum. Ut luctus vestibulum ipsum eu ultricies. Fusce commodo erat at ipsum pellentesque adipiscing. Praesent non nisl turpis, ac hendrerit lorem. Morbi a faucibus nisi. Morbi non libero eleifend ipsum condimentum mollis et id ipsum. Fusce mattis felis sem. Duis elementum urna vel velit luctus a convallis arcu mollis. Pellentesque imperdiet egestas tellus, et fringilla nisl euismod quis. Ut a arcu tortor. Phasellus semper dui nec sapien semper posuere. Quisque in nisi ipsum.
       </p>
       <input type="text" onchange="realce(this.value)">

 

Vamos utilizar uma expressão regular que receba parâmetros, depois, basta fazer uma alteração no HTML:

 

function realce(valor){
   var texto = document.getElementById('texto').InnerHTML;
   texto.replace(new RegExp(valor, 'g'), function(match){ return '<span class="realce">match</span>'; });
   document.getElementByid('texto').innerHTML = texto;
}

 

E, por fim, basta criar uma classe para o realce:

.realce { color: #f00; }