Comunidad de diseño web y desarrollo en internet online

Realizar búsquedas en un array

Citar            
MensajeEscrito el 21 Oct 2013 07:57 am
Hola, tengo un array con una serie de objetos y al cargar la página me muestra los nombres en grupos de 3 y quiero añadir la opción de búsqueda para que a través de un input poder introducir un nombre, lo busque y lo muestre.
Este es el código para mostrar todos los nombres, y al final de este código pongo la función que he creado para realizar la búsqueda

Código Javascript :

var nombre = new Array();
nombre = [["Daniel",35],
["María",19],
["David",28],
["Carlos",32],
["Mario",26]];

var mostrar = 3;

var Pagify = function(pArray, pCounter)
{
    var array = pArray;
    var pointer = 0;
    var btnPrevious;
    var btnNext;
    var btnFirst;
    var btnLast;
    var counter = pCounter;
    var self = this;
    
    this.canNext = function()
    {
        return (pointer + counter < array.length);      
    }
    
    this.canPrevious = function()
    {
        return (pointer >= counter);    
    }
    
    this.first = function()
    {        
        pointer = 0;
        self.show();
    }
    
    this.last = function()
    {
        var multiply = Math.floor(array.length / counter);        
        pointer = counter * multiply;
        self.show();
    }
    
    this.next = function()
    {    
        if (self.canNext())
        {
            pointer += counter;
            self.show();
        }
    }
    
    this.previous = function()
    {
        if (self.canPrevious())
        {
            pointer -= counter;
            self.show();
        }
    }
    
    this.setPreviousButton = function(buttonId)
    {
        btnPrevious = document.getElementById(buttonId);
        btnPrevious.onclick = self.previous;
    }
    
    this.setFirstButton = function(buttonId)
    {
        btnFirst =document.getElementById(buttonId);
        btnFirst.onclick = self.first;
    }
    
     this.setLastButton = function(buttonId)
    {
        btnLast = document.getElementById(buttonId);
        btnLast.onclick = self.last;
    }
    
    this.setNextButton = function(buttonId)
    {
        btnNext =document.getElementById(buttonId);
        btnNext.onclick = self.next;
    }
    
    this.show = function()
    {        
        document.getElementById("lNombres").innerHTML = "";
        
        for(var i = pointer; i < pointer + counter && i < array.length ; i++)
        {
            document.getElementById("lNombres").innerHTML+= i +" - "+array[i][0]+" ....."+array[i][1] + "<br>";
        }        
        
        btnPrevious.disabled = !self.canPrevious();
        btnNext.disabled = !self.canNext();
        btnFirst.disabled = !self.canPrevious();
        btnLast.disabled = !self.canNext();         
    }    
}

window.onload = function()
{    
    var pagify = new Pagify(nombre, mostrar);
    
    pagify.setPreviousButton("botanterior");
    pagify.setNextButton("botsiguiente");   
    pagify.setFirstButton("botprimero");   
    pagify.setLastButton("botultimo");   
    pagify.show();    
}

Este el el código para las búsquedas, la cuestión sería integrar las dos funciones

Código Javascript :

var encontrados=new Array();
 function busca(buscar) {
    encontrados=new Array();
   for(var i=0; i<nombre.length; i++) {
         var nodoLower=nombre[i][0].toLowerCase();
   if(nodoLower.indexOf(buscar.toLowerCase())!=-1) {
             encontrados.push(nombre[i]);
        }
    } 
   document.getElementById("lNombres").innerHTML+= i +" - "+array[i][0]+" ....."+array[i][1] + "<br>";
   } 

Código HTML :

<body>
<span id="lNombres"></span><br>
<br>
<form id="formBusqueda" name="formBusqueda">
Nombre: <input name=text1 type="text" id="buscar" size="30" maxlength="25" value="" />&nbsp;<button type="button" id="botbuscar" value="Buscar" onMouseDown="busca(document.getElementById('buscar').value)"><strong>Buscar</strong></button>
</form>
<br>
<input type="button" id="botprimero" value="Primero" />
<input type="button" id="botanterior" value="Anterior" />
<input type="button" id="botsiguiente" value="Siguiente" />
<input type="button" id="botultimo" value="Último" />
</body>

Por josemar2000

15 de clabLevel



 

msie8
Citar            
MensajeEscrito el 22 Oct 2013 10:31 pm
mira este fiddle que tengo en la funcion "QuitarValor", ahi lo que hago es buscar el indice del valor para poder eliminarlo del array, es una busqueda simple, espero te pueda ayudar a aclarar tu mente.

http://jsfiddle.net/elporfirio/bkkQ2/

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 23 Oct 2013 08:37 am
Hola, la búsqueda la tengo resuelta y me funciona perfectamente, pero tengo problemas con los botones de siguiente y anterior porque no funcionan correctamente, así que como en la función que has visto al principio si me funcionan todos los botones y me muestra el array como yo quiero pero no tiene búsqueda por tanto quería integrar la búsqueda en ese código, pero no sé si es posible, si no lo es tendría que utilizar la búsqueda pero ya de manera independiente.

Para eso he hecho este otro código, y la búsqueda funciona perfectamente pero tiene dos problemas, uno que me muestra los resultados de uno en uno y necesito que se muestren en grupos con la variable var mostrar = 3 como en el otro código y los botones funcionan si vas pasando del primer resultado al último o de este al primero, pero directamente sin escalas, pero si vas retrocediendo y paras y pinchas en siguiente, ya no va al siguiente sino que vuelve al primero, o sea, al principio, así que solucionando esos dos problemas ya me serviría este código, así que te lo pongo, haber si me puedes ayudar.

Código Javascript :

var ultimomostrado = 0;
var encontrados=new Array();
var nombre = new Array();
nombre = [["Daniel",35], 
["María",19], 
["David",28], 
["Carlos",32], 
["Mario",26]]; 

function busca(buscar) { 
encontrados=new Array(); 
for(var i=0; i<nombre.length; i++) { 
var nodoLower=nombre[i][0].toLowerCase(); 
if(nodoLower.indexOf(buscar.toLowerCase())!=-1) { 
encontrados.push(nombre[i]); 
      } 
} 
    if (encontrados.length==1) {
        document.getElementById('mensaje').innerHTML="1/1 resultados";
        document.getElementById('lNombres').innerHTML=encontrados[0][0]+" ...";        
        document.getElementById("botanterior").disabled=true;
        document.getElementById("botsiguiente").disabled=true;
    }else if(encontrados.length>1){
        document.getElementById('mensaje').innerHTML="1 de "+encontrados.length+" resultados";
        document.getElementById('lNombres').innerHTML=encontrados[0][0]+" ...";        
        document.getElementById("botanterior").disabled=true;
        document.getElementById("botsiguiente").disabled=false;      
    }else{
        document.getElementById('mensaje').innerHTML="No se han encontrado resultados";
        document.getElementById('lNombres').innerHTML="";        
        document.getElementById("botsiguiente").disabled=true;
    }
  }
 
function siguiente(){   
    if (ultimomostrado<encontrados.length){
        ultimomostrado++;
        var num=ultimomostrado+1;
        document.getElementById('mensaje').innerHTML=num+" de "+encontrados.length+" resultados";
        document.getElementById('lNombres').innerHTML= encontrados[ultimomostrado][0]+" ...";                 
        if(ultimomostrado==encontrados.length-1){
           document.getElementById("botanterior").disabled=false;
           document.getElementById("botsiguiente").disabled=true;
   ultimomostrado = 0;
        }else{
            document.getElementById("botanterior").disabled=false;
            document.getElementById("botsiguiente").disabled=false;
        }
    }
}

 function anterior(){
    if (ultimomostrado<encontrados.length){
        ultimomostrado++;
        var num=ultimomostrado+1;
        document.getElementById('mensaje').innerHTML = num +" de "+encontrados.length+" resultados";
        document.getElementById('lNombres').innerHTML= encontrados[ultimomostrado][0]+" ...";        
        document.getElementById("botanterior").disabled=true;
     ultimomostrado = -1;
        if(ultimomostrado==encontrados.length-1){
           document.getElementById("botanterior").disabled = false;
        }else{ 
           document.getElementById("botanterior").disabled = false;
           document.getElementById("botsiguiente").disabled = false;                 
         }
    }
}

Código HTML :

<input name="botanterior" type="button" disabled="true" id="botanterior" onClick="anterior()"  value="Anterior">&nbsp;
<input name="botsiguiente" type="button" disabled="true" id="botsiguiente" onClick="siguiente()"  value="Siguiente">

Por josemar2000

15 de clabLevel



 

msie8
Citar            
MensajeEscrito el 23 Oct 2013 02:16 pm
Para mi es un codigo muy extenso, lo ideal es que pudieras hacerlo funcionar el jsfiddle para poder ver el codigo y ayudar a modificar los elementos junto con el HTML.

Saludos.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 23 Oct 2013 06:37 pm
El código es bastante farragoso, sobre todo en el tema de los botones, es demasiado código y duplicado, porque tienes que poner el mismo código en los distintos botones y no me convence y encima no me funcionan correctamente, pero de momento es la única forma que se me ha ocurrido de crear una búsqueda, con sus correspondientes botones, tiene que haber otras formas, pero de momento no se me ha ocurrido ninguna otra, me gusta mucho más el primer código, que me muestra los objetos y funcionan perfectamente los botones y es un código más claro, pero no consigo incluirle la búsqueda.
Volviendo al problema de los botones lo que ocurre es que cuando cambias la trayectoria, vas hacia abajo por ejemplo y antes de llegar al principio, vuelves a pinchar en siguiente se reinicializa la variable ultimomostrado y vuelve al principio en vez de seguir por donde se quedó.
Supongo que necesito una variable que recoja el índice del objeto que se está mostrando en ese momento y lo utilicen los botones para ir hacia adelante y hacia atrás

Por josemar2000

15 de clabLevel



 

msie8
Citar            
MensajeEscrito el 23 Oct 2013 08:43 pm
USEN EL BOTÓN DE CÓDIGO QUE ESTA JUNTO AL BOTÓN DE FLASH EN EL EDITOR, SALE AL USAR LA OPCIÓN RESPONDER AL TEMA



^_^ Gracias ^_^

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 23 Oct 2013 10:46 pm
Ya te lo he subido al jsfiddle, te agradecería que le echaras un vistazo y me ayudaras a solucionar el problema del funcionamiento de los botones

http://jsfiddle.net/josemar2000/pZy8N/1/

Saludos

Por josemar2000

15 de clabLevel



 

msie8
Citar            
MensajeEscrito el 24 Oct 2013 06:49 pm
Te woe a ayudar.. aunuqe hubiera sido más facil con Jquery en ves de JS puro..

pero lo tomare ocmo un reto.. un paginador.. ya estas :D

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 24 Oct 2013 07:27 pm
No sabes como te lo agradezco, he de reconocer que mis conocimientos en JavaScript son bastante limitados, estoy aprendiendo, pero me manejo, por eso lo he hecho en JS, pero de Jquery no tengo ni idea.
Lo dicho, gracias por tu interés

Por josemar2000

15 de clabLevel



 

msie8
Citar            
MensajeEscrito el 24 Oct 2013 10:03 pm
ESto fue lo que hice despues de muchas marcianada si que es un rollo amigo...

http://jsfiddle.net/elporfirio/DVYFe/


Hay que llevar, la cantidad de resultados por pagina,
a partir de este se calculan las paginas totales.

Se va llevando el dato de
cual es el ultimo dato mostrado
y de cuantos datos se mostraror (que pagines en 3 resultados no quiere decir que se mostraron 3)

y bueno trate de hacerlo todo con JS como tu lo haces, la verdad mucho codigo pero gracias a esto aprendi más

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 25 Oct 2013 06:21 am
Hola ando un poco apurado te dejo solo la navegacion pero con jquery, espero pronto pula el codigo

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    
var buscarNombre = new Array();
buscarNombre = [["Daniel",35],
                ["Luis",42],
                ["María",19],
                ["Damian",51],
            ["María",21],
                ["David",28],
                ["Mario",26]];
            
// Obtenemos el total
$('#total').html(buscarNombre.length-1);

for(i=1; i<buscarNombre.length; i++){
   
var ubicasion = 0;
$('#anterior').attr('disabled','disabled');   
$('#navegacion').html(buscarNombre[ubicasion]);


$('#ubicacion').html(ubicasion);

}

$('#siguiente').click(function(){
   
var ubicasion2 = $('#ubicacion').html();
ubicasion2++;
$('#ubicacion').html(ubicasion2);
if(ubicasion2==buscarNombre.length-1){ $('#siguiente').attr('disabled','disabled');} else {$('#siguiente').removeAttr('disabled');}
if(ubicasion2<buscarNombre.length-1){ $('#anterior').removeAttr('disabled');} else {}
for(i=0; i<buscarNombre.length; i++){
   $('#navegacion').html(buscarNombre[ubicasion2]);
}

   
   });
   
$('#anterior').click(function(){
var ubicasion3 = $('#ubicacion').html();
if(ubicasion3-1==0){ $('#anterior').attr('disabled','disabled');} else {$('#anterior').removeAttr('disabled');}
if(ubicasion3-1>1){ $('#siguiente').removeAttr('disabled');} else {}   
$('#ubicacion').html(ubicasion3-1);
$('#navegacion').html(buscarNombre[ubicasion3-1]);
   
   });

});
 
</script>
</head>

<body>
<div id="ubicacion"></div><div id="total"></div>
<div id="navegacion"></div>

<button type="button" value="siguiente" id="anterior">anterior</button>
<button type="button" value="siguiente" id="siguiente" >siguiente</button>




</body>
</html>

Saludos!

Por alejandroC

34 de clabLevel



 

firefox
Citar            
MensajeEscrito el 25 Oct 2013 07:08 am
Pd: en el script que te muestro puedes jugar con el array imaginando que son los resultados de busqueda la navegacion no fallara.

Saludos!

Por alejandroC

34 de clabLevel



 

chrome
Citar            
MensajeEscrito el 25 Oct 2013 07:22 pm
De nuevo muchas gracias por tu trabajo y esfuerzo, también para Alejandro, lo de paginar de tres en tres, me refiero a que no me muestre los resultados de uno en uno, sino en grupos, en este caso de tres, en el caso lógicamente de que los encontrados sean más de tres, si son 5 por ejemplo, pues que me muestre el primer grupo con los tres primeros y al pulsar en siguiente me muestre los 2 que quedan, lógicamente si me encuentra sólo 2 pues que me muestre esos 2

Dicho esto, en el jsfiddle, lo he probado y parece que funciona bien, pero al probarlo en la página falla, no hace la búsqueda y da error, lo he mirado con la consola del Firefox y me dice TypeError: $divcant is null y la linea que me indica es la 63 que corresponde a esta $divcant.innerHTML = $cantidad;

Por josemar2000

15 de clabLevel



 

msie8
Citar            
MensajeEscrito el 25 Oct 2013 08:37 pm
significa que no tienes una DIV con el id que se indica amigo :P

por eos no puedes ponerle el inner.html

checa bien el JSFIDDLE aparte del JS le cambie el HTML agregando nuevos campos del tipo div.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 26 Oct 2013 12:25 pm
Eso fue lo primero que comprobé y si están, te pongo los tres tal y como están en la página
<div id="cantidad"></div>
<div id="datos"></div>
<span id="pagina"></span><br>
Y cuando pulso en el botón borrar me sale TypeError: div is null y lo he copiado tal cual del jsfiddle, así que no es un problema de que me falte algo, pero el caso es que en el jsfiddle eso funciona bien, eso, porque el botón anterior, una vez que estás en el final y vas retrocediendo no llega hasta el primero, se queda en el segundo que es Luis y el botón se deshabilita.

Te dejo en el jsfiddle el código que utilizo para mostrar todos, por grupos, pero sin búsqueda, y es el que tengo puesto al principio de estos mensajes, tiene también un botón de primero y último y verás como hagas lo que hagas siempre funcionan bien todos, cuando llegas al final los botones de último y siguiente se deshabilitan, cuando llegas al principio son los de primero y anterior los que están deshabilitados, pero cuando avanzas una página se habilitan de nuevo.
Échale un vistazo y mira que te parece el código, por si te vale como idea o puedes aprovecharlo, porque eso es lo que necesito pero que en vez de que se muestren los objetos del array nombre, se muestren los del array encontrados, que se crea con los resultados de la búsqueda.

http://jsfiddle.net/josemar2000/aD2uE/1/

Por josemar2000

15 de clabLevel



 

msie8
Citar            
MensajeEscrito el 03 Nov 2013 07:36 pm
Hola de nuevo, el error que salía TypeError: div is null ya está solucionado, el problema estaba que esta variable var div = document.getElementById("datos"); estaba definida el principio de la página y ahí no la encuentra.
He ajustado algunas cosillas como los botones, ya se activan y desactivan cuando tienen que hacerlo, pero hay una cosa que no funciona bien y es a la hora de moverte con los botones atras y adelante y cuando en la última página los nombres mostrados es menor que en el resto, o sea si tienes 8 nombres y quieres mostrar 3 por página en el última saldrían sólo dos, pues en este caso al moverte hacia atrás te los iría mostrando de tres en tres pero sólo llegaría hasta el segundo nombre, si vuelves hasta el final, ya no te aparece el último, o sea, que en cada recorrido que vas haciendo pues se va comiendo nombres, pero como he dicho antes esto sólo ocurre cuando en la última página hay un resto, si en el caso del ejemplo fueran 9 nombres en vez de 8 funcionaría bien, lo he estado mirando pero no consigo dar con la solucion, así que te agradecería que me echaras una mano.

Saludos

Por josemar2000

15 de clabLevel



 

msie8
Citar            
MensajeEscrito el 05 Nov 2013 08:57 am
Hola de nuevo, referente a mi anterior mensaje, ya he solucionado el problema de los botones, ya funcionan correctamente, ahora me gustaría también resolver el problema de los acentos en las búsquedas, en las mayúsculas ya lo tengo resuelto con toLowerCase y me gustaría hacer lo mismo con las palabras acentuadas, que no hiciera distinciones a la hora de hacer la búsqueda, que encontrara la palabra independientemente de que la escribas con o sin acento y de como esté escrita en el Array

Saludos

Por josemar2000

15 de clabLevel



 

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.