En la pagina de planeta hay un js que se llama
b_p_nombre.js que entre la gran cantidad de codigos que posee, hay un frangmento que es el que me interesaba.
Lo que hace este codigo es filtrar los nombres a medida que vallamos escribiendo en el input.
Código:
nombresActivo = false;
// Función para filtrar el listado de chicas
function fFiltrarListadoNombres(){
tecladoNombre = document.getElementById( 'txtBuscarPorNombre' ).value;
tecladoNombre = tecladoNombre.toLowerCase();
if( tecladoNombre.length > 0 ){
for( bpnNombre in arrBPN ){
if( arrBPN[ bpnNombre ][ 0 ].indexOf( tecladoNombre ) != 0 ){
document.getElementById( 'bpnNombre' + arrBPN[ bpnNombre ][ 1 ] ).style.display = 'none';
} else {
document.getElementById( 'bpnNombre' + arrBPN[ bpnNombre ][ 1 ] ).style.display = 'block';
}
}
} else {
for( bpnNombre in arrBPN ){
document.getElementById( 'bpnNombre' + arrBPN[ bpnNombre ][ 1 ] ).style.display = 'block';
}
}
}
// Función para mostrar la portada de la chica en el listado
function fMostrarPortadaBPN( evt, urlImagen ){
if( evt.pageX ){ // Mozilla
imgX = evt.pageX + 16;
imgY = evt.pageY;
} else if( evt.clientX ){ // IE
imgX = evt.clientX + 16 + document.body.parentNode.scrollLeft;
imgY = evt.clientY + document.body.parentNode.scrollTop;
}
document.getElementById( 'bpnImagen' ).src = urlImagen;
with( document.getElementById( 'divImagenPortadaBuscador' ) ){
style.display = 'block';
style.left = imgX + 'px';
style.top = imgY + 'px';
}
}
Este codigo la guarde en un .js que luego carge dentro del body del theme.
Luego hay otro script que debemos cargar, pero esta ves agregando funciones de wordpress.
Código PHP:
<script type="text/javascript">
<!--
var arrBPN = new Array();
// lo que hago aca es llamar a todos los post de la categoria 1
<?php $feature_post = get_posts( 'category=1&numberposts=9999' ); ?>
<?php foreach( $feature_post as $post ) :setup_postdata( $post ); ?>
// y que repita esta linea con cada uno de los post de la categoria 1
arrBPN[ arrBPN.length ] = new Array( '<?php the_title(); ?>', <?php the_ID();?> );
<?php endforeach; ?>
-->
</script>
luego este fue el codigo que agrege en la pagina.
Código PHP:
<div id="buscarNombre" >
<input
id="txtBuscarPorNombre"
style=" cursor: pointer; display: block;"
value="Buscar por Nombre"
onmouseover="this.style.borderColor='#999999'; this.value=' '; "
onmouseout="this.style.borderColor='#ccc';"
onmouseup="fMostrarListadoNombres();"
onfocus="this.style.backgroundColor='#fff'; this.value='';"
onblur="this.style.backgroundColor='#fff'; this.value='Buscar por Nombre';"
onkeyup="fFiltrarListadoNombres();"
type="text"
>
<div
id="bpnListadoNombres"
style="overflow: auto;overflow-x:hidden;
position:absolute;
">
<?php $feature_post = get_posts( 'category=1&numberposts=99&order=ASC&orderby=title' ); ?>
<?php foreach( $feature_post as $post ) :setup_postdata( $post ); ?>
<div id="bpnNombre<?php the_ID();?>" class="nombresescortsbuscar" > <a class="Ntooltip" href="<?php the_permalink(); ?>" onmouseover="TagToTip('busca<?php the_ID(); ?>')" onmouseout="UnTip()"> <?php the_title(); ?><span id="busca<?php the_ID(); ?>"><?php echo c2c_get_custom('post-image','<img src="','" alt="<?php the_title(); ?>" class="post-image" />'); ?> </span></a> </div>
<?php endforeach; ?>
</div>
</div>
Como dije anterior mente conosco algo e php, pero no soy un experto, todo lo contrario soy un principiante, y la mayoria de las cosas que hago es mediante el infalible prueba y error, hago cambios por aqui y por allá hasta que funcione, soy diseñador y el css es mi herramienta.
haha buenmo y el css es el siguiente.
Código:
#buscarNombre { padding:3px 10px 4px; width: 151px; text-align: left;}
#txtBuscarPorNombre {font-size:13px; padding:3px 10px; width:131px; border:1px solid #ccc; text-align: left; color:#cc006d; background:url(http://localhost:8888/wp7/wp-content/themes/sexola/images/lupa3.jpg) no-repeat right #fff;}
#bpnListadoNombres {border-style: solid; border-color:#999999; background:#fff; border-width: 0px 1px 1px; width: 151px; height: 151px;}
.nombresescortsbuscar {}
Seria más facil si pudiera subir los archivos, saludos.
Ojala les sirva.