Realizar búsquedas dentro de un Array

[josemar2000]

Hola a todos
Tengo un formulario con dos Arrays en unos van los usuarios y en otro la edad, correspondiente de cada uno.
He hecho un formulario de búsqueda donde al introducir un nombre si lo encuentra me lo muestra en un input y si no, sale un mensaje, hasta ahí bien, pero necesito varias cosas que no he conseguido todavía:
Que en la búsqueda no tenga en cuenta mayúsculas y minúsculas, tal como está tengo que introducir el nombre tal cual está declarado.
Y necesito que cuando encuentre el nombre buscado, la búsqueda es exclusivamente por este campo, que me muestre también en otro input la edad correspondiente a ese nombre.
Y por último si en el resultado encuentra más de un elemento, como me lo muestra en un input necesito que me muestre sólo el primero y el resto me lo vaya mostrando a través de un botón que al pulsarle me vaya mostrando los siguientes resultados de uno en uno hasta llegar al último.

<script language="javascript" type="text/javascript">
var edad = new Array();
edad[0] = 35;
edad[1] = 42;
edad[2] = 51;
edad[3] = 28;
edad[4] = 26;

var nombre = new Array();
nombre[0] = "Antonio";
nombre[1] = "Luis";
nombre[2] = "María";
nombre[3] = "Pedro";
nombre[4] = "Mario";
function busqueda() {
var b = document.getElementById("buscar").value;
var usuarios = "";
if(b!="") {
for(var i=0; i<nombre.length; i++) {
if(nombre[i].indexOf(b)!=-1) {
usuarios += nombre[i];

}
}
if(usuarios != ""){
document.getElementById('nombre').value = usuarios;
document.getElementById('edad').value = edad[1];
} else {
document.getElementById('mensaje').innerHTML="\<p\ >No se han encontrado resultados\<\/p\>"
}
}
}
</script>


Código HTML

Innput donde se introduce el texto de busqueda:
<input type="text" id="buscar" size="30" maxlength="25" value="ingresar texto de búsqueda" onFocus='this.value="";' />

Botón para comenzar la búsqueda:
<button type="button" value="Buscar" onclick="busqueda()"><strong>Buscar por Nombre</strong></button>

Input de resultados para el campo nombre y el campo edad:
Nombre: <input type="text" id="nombre" size="30" maxlength="25" value="" />
Edad: <input type="text" id="edad" size="30" maxlength="25" value="" />

Botón para mostrar los siguientes resultados
<input type="button" value="Siguiente" onmousedown="aqui iria la funcion">

<br />
Posición donde sale el mensaje en caso de que no encuentre datos
<div id="mensaje"></div>

[quimfv]

De entrada usa un array multidimensional para guardar los datos así te vas a ahorrar una busqueda

Código Javascript:

var personas = new Array();
personas[0][0] = "Antonio";
personas[0][1] = 35;
personas[1][0] = "Luis";
personas[1][1] = 42;
personas[2][0] = "María";
personas[2][1]= 51;
personas[3][0] = "Pedro";
personas[3][1] = 28;
personas[4][0] = "Mario";
personas[4][1] = 26;
 

Crea un array para guardar los resultados de la busqueda

Código Javascript:

var usuarios = new Array();
 

Crea una variable para guardar el ultimo mostrado.

Código Javascript:

var ultimomostrado=0;
 

deben ser fuera de la funcion ya que las vas a necesitar en la función que debe mostrar los sucesivos resultados si hay mas de uno.

Para evitar el problema de las mayúsculas y la minúsculas usa .toLowerCase() y compara simpre minúsculas contra minúsculas

Código Javascript:

personas[i][0].toLowerCase()==b.toLowerCase()
 

Cuando encuentres a uno de los usuarios guarda el nombre y la edad

Código Javascript:

var usuario=new Array();
usuario[0]=personas[i][0];
usuario[1]=personas[i][1];
usuarios[]=usuario;
 

Haz un condicional triple que vea cuantos usuarios has encontrado

Código Javascript:

if(usuarios.length==1){
   document.getElementById('nombre').value = usuarios[0][0];
   document.getElementById('edad').value = usuarios[0][1];
   document.getElementById("botsiguiente").disabled=true;
} else if (usuarios.length>1) {
   document.getElementById('nombre').value = usuarios[0][0];
   document.getElementById('edad').value = usuarios[0][1];
   document.getElementById("botsiguiente").disabled=false;
}else{
   document.getElementById('mensaje').innerHTML="\<p\ >No se han encontrado resultados\<\/p\>";
   document.getElementById('nombre').value = "";
   document.getElementById('edad').value = "";
   document.getElementById("botsiguiente").disabled=true;
}
 

Define bien el boton.

Botón para mostrar los siguientes resultados
<input type="button" value="Siguiente" onmousedown="aqui iria la funcion">

mejor

Código HTML:

<input name="botsiguiente" type="button" disabled="true" id="botsiguiente" onClick="siguiente()"  value="Siguiente">
 

La funcion siguiente() cae por su peso

Código Javascript:

function siguiente(){
 if (ultimomostrado<usuarios.length){
     ultimomostrado++;
     document.getElementById('nombre').value = usuarios[ultimomostrado][0];
     document.getElementById('edad').value = usuarios[ultimomostrado][1];
     if(ultimomostrado==usuarios.length){
        document.getElementById("botsiguiente").disabled=true;
     }else{
        document.getElementById("botsiguiente").disabled=false;
     }
   }
}
 

[josemar2000]

El Array de personas al cargar la pagina me dice errores en la página, sin hacer nada, sólo al meter ese Array

Y en el siguiente array en el elemento usuarios falta completar los corchetes

var usuario=new Array();
usuario[0]=personas[i][0];
usuario[1]=personas[i][1];
usuarios[]=usuario;

[quimfv]

Perdona me pase de listo y creo que mezcle sintaxis de varios lenguajes ... ahi lo tienes corregido.

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 language="JavaScript" type="text/javascript">
var usuarios=new Array();
var personas = new Array();
var persona=new Array();
persona[0] = "Antonio";
persona[1] = 35;
personas.push(persona);
persona=new Array();
persona[0] = "Luis";
persona[1] = 42;
personas.push(persona);
persona=new Array();
persona[0] = "María";
persona[1]= 51;
personas.push(persona);
persona=new Array();
persona[0] = "Pedro";
persona[1] = 28;
personas.push(persona);
persona=new Array();
persona[0] = "Mario";
persona[1] = 26;
personas.push(persona);
</script>
</head>
<b>Personas</b><br />
<span id="personas"></span><br />
<b>Usuarios</b><br />
<span id="usuarios"></span>
<script language="JavaScript" type="text/javascript">
for (var i=0;i<personas.length;i++){
    document.getElementById("personas").innerHTML+=personas[i][0]+" "+personas[i][1]+"<br>";
    var usuario=new Array();
    usuario[0]=personas[i][0];
    usuario[1]=personas[i][1];
    usuarios.push(usuario);
    }
for (var i=0;i<usuarios.length;i++){
    document.getElementById("usuarios").innerHTML+=usuarios[i][0]+" "+usuarios[i][1]+"<br>";
    }
</script>
<body>
</body>
</html>
 

[josemar2000]

Por qué le has puesto los push, si ese método es para añadir elementos y yo simplemente lo que quiero es realizar una búsqueda sobre un array y que cuando me encuentre más de un elemento sólo me muestre por pantalla uno, y los demás me los vaya mostrando también de uno en uno, cada vez que pulse el botón de siguiente.
La búsqueda ya funciona y perfectamente, pero el problema es ese, que me muestra todos los encontrados de golpe, todos al mismo tiempo y los quiero de uno en uno.

Te vuelvo a pasar el código como lo tengo ahora para que le eches un vistazo, yo creo que sólo necesita algún arreglillo

<script language="javascript" type="text/javascript">
// Carga de contactos
var ultimomostrado = 0;
var buscarNombre = new Array();
buscarNombre[0] = "Daniel";
buscarNombre[1] = "Luis";
buscarNombre[2] = "María";
buscarNombre[3] = "David";
buscarNombre[4] = "Mario";
var edad = new Array();
edad[0] = 35;
edad[1] = 42;
edad[2] = 51;
edad[3] = 28;
edad[4] = 26;
// y un monton mas de Arrays y de elementos en cada Array
function busca() {
var s = document.getElementById("buscar").value;
var nombres = "";
var edades = "";

if(s!="") {
for(var i=0; i<searchNombre.length; i++) {
if(buscarNombre[i].indexOf(s)!=-1) {
nombres += buscarNombre[i]+"<br/>";
edades += edad[i]+"<br/>";
}
}

if (nombres.length>1) {
document.getElementById('mensaje').innerHTML=nombr es;
document.getElementById('edad').innerHTML=edades;
document.getElementById("botsiguiente").disabled=f alse;
}else{
document.getElementById('mensaje').innerHTML="\<p\ >No se han encontrado resultados\<\/p\>";
document.getElementById('edad').value = "";
document.getElementById('mensaje').value = "";
document.getElementById("botsiguiente").disabled=t rue;
}
}
}

Aquí queda arreglar la variable que tal como está no tiene mucha eficacia

function siguiente(){
if (ultimomostrado<nombres.length){
ultimomostrado++;
document.getElementById('nombre').value = nombres[ultimomostrado][0];
document.getElementById('edad').value = nombres[ultimomostrado][1];
if(ultimomostrado==nombres.length){
document.getElementById("botsiguiente").disabled=t rue;
}else{
document.getElementById("botsiguiente").disabled=f alse;
}
}
}
</script>

[quimfv]

Mas de un arreglillo

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
// Carga de contactos
var ultimomostrado = 0;
var encontrados=new Array();
var buscarNombre = new Array();
buscarNombre = [["Daniel",35],
                ["Luis",42],
                ["María",19],
                ["María",51],
                ["David",28],
                ["Mario",26]];
function busca(buscar) {
    encontrados=new Array();
    for(var i=0; i<buscarNombre.length; i++) {
        if(buscarNombre[i][0].toLowerCase()==buscar.toLowerCase()) {
            encontrados.push(buscarNombre[i]);
        }
    }
 
    if (encontrados.length==1) {
        document.getElementById('mensaje').innerHTML="1/1 resultados";
        document.getElementById('nombre').innerHTML=encontrados[0][0];
        document.getElementById('edad').innerHTML=encontrados[0][1];
        document.getElementById("botsiguiente").disabled=true;
    }else if(encontrados.length>1){
        document.getElementById('mensaje').innerHTML="1 de "+encontrados.length+" resultados";
        document.getElementById('nombre').innerHTML=encontrados[0][0];
        document.getElementById('edad').innerHTML=encontrados[0][1];
        document.getElementById("botsiguiente").disabled=false;
    }else{
        document.getElementById('mensaje').innerHTML="No se han encontrado resultados";
        document.getElementById('nombre').innerHTML="";
        document.getElementById('edad').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('nombre').innerHTML= encontrados[ultimomostrado][0];
        document.getElementById('edad').innerHTML = encontrados[ultimomostrado][1];
        if(ultimomostrado==encontrados.length-1){
            document.getElementById("botsiguiente").disabled=true;
        }else{
            document.getElementById("botsiguiente").disabled=false;
        }
    }
}
</script>
</head>
 
<body>
Nombres<br>
<span id="lNombres"></span><br>
<script language="JavaScript" type="text/javascript">
for (var i=0;i<buscarNombre.length;i++){
    document.getElementById("lNombres").innerHTML+=buscarNombre[i][0]+" "+buscarNombre[i][1]+"<br>";
    }
</script>
Ingresar texto de búsqueda&nbsp;<input type="text" id="buscar" size="30" maxlength="25" value="" onBlur="busca(this.value)" /><br>
<span id="nombre"></span>&nbsp;<span id="edad"></span><br>
<span id="mensaje"></span><br><input name="botsiguiente" type="button" disabled="true" id="botsiguiente" onClick="siguiente()"  value="Siguiente">
</body>
</html>
 

[josemar2000]

He dicho lo de arreglillo porque soy muy modesto, pero es verdad que al ver el código que me has mandado el mío necesitaba una restauración completa.

Pero ahora si que necesita un par de ajustes:
Antes podías escribir el nº de caracteres que quisieras y te buscaba los elementos, si escribias las dos primeras letras, te mostraba todas las palabras que empezaban por esas letras, ahora para obtener resultados tienes que escribir la palabra completa, si te falta una sola letra ya no la encuentra.
Al código que me has mandado le he incluido un botón para que haga la búsqueda al pulsar este, pero me hace la búsqueda al pulsar en cualquier sitio del documento, y no sólo al pulsar el botón.
Si le quito al input text el evento onChange="busca(this.value)" y pulso en el botón entonces no hace nada, no hace la búsqueda.
Como habrás visto en el código del input, le he incluido dos funciones para que me saque un texto cuando el campo está vacío y funciona.
Y lo que necesito también es que al cargar la página o recargar me borre el contenido de todos los input text del formulario pero no lo he conseguido y he probado de todas las formas
document.formBusqueda.reset();

<body onLoad="limpiarform">

Nombre de usuario: <input name=text1 type="text" id="buscar" size="30" maxlength="25" value="Ingresar texto de búsqueda" onFocus="limpiar_texto()" onBlur="mostrar_texto()" onChange="busca(this.value)" />
<button type="button" id="buscar" value="Buscar" onMouseDown="busca(this.value)" ><strong>Buscar por Título</strong></button>
<input type="reset" value="Borrar datos" onmousedown="this.form.reset();">

[quimfv]

Código HTML:

<body onLoad="limpiarform">
....
  <form>
      Nombre de usuario: 
         <input name=text1 type="text" id="buscar" size="30" maxlength="25" value="Ingresar texto de búsqueda" onFocus="limpiar_texto()"  />
         <button type="button" id="botbuscar" value="Buscar" onClick="busca(document.getElementById('buscar').value)" >
            <strong>Buscar por Título</strong>
         </button>
         <input type="reset" value="Borrar datos">
   </from>
 

Ojo que los id deben ser únicos.
Si el boton es de type reset no necesita nada para que limpie el formulario.

this.value significa "el valor de este objeto" luego si usas la función en el boton no puedes poner this puesto que el valor esta en otro objeto.... de ahí document.getElementById('buscar').value.


Para que busque con solo alguna de las letras deberias cambiar la comparación....usar la que habias puesto pero pasando primero a minúsculas....

Cambiar

Código Javascript:

if(buscarNombre[i][0].toLowerCase()==buscar.toLowerCase()) {
 

por

Código Javascript:

var nodoLower=buscarNombre[i][0].toLowerCase();
 if(nodoLower.indexOf(buscar.toLowerCase())!=-1) {
 

[josemar2000]

Problemillas anteriores resueltos.

Pero....., siempre hay un pero

Cuando haces una búsqueda y te aparecen varios resultados y borras el contenido del input text con el input type="reset" y vuelves a hacer una búsqueda, también con varios resultados, te pone 1/2 por ejemplo, hasta ahí bien, pues pinchas el botón de siguiente y ya te pone 3/2 y no cambia el nombre al segundo encontrado, sino que se mantiene en el primero y sale un mensaje de errores en la página.
Esto sólo ocurre cuando utilizo el botón de reset, si cuando voy a hacer una nueva búsqueda refresco o actualizo la página esto no pasa, funciona perfectemente.

[quimfv]

Haz una funcion que limpie el contenido del array de resultados y asociala al onclick de boton de resset.

[josemar2000]

Ya está solucionado, funciona perfectamente, lo que he hecho es más sencillo que eso.
Dentro de la función del botón siguiente en el if que habilita el botón en función de los resultados encontrados, le reinicio la variable ultimomostrado

if(ultimomostrado==encontrados.length-1){
document.getElementById("botsiguiente").disabled=t rue;
ultimomostrado = 0;
}else{
document.getElementById("botsiguiente").disabled=f alse;
}

[josemar2000]

última consulta y ya no te molesto más

Como hago para poder introducir nombres en el input text sin los acentos y que me los encuentre cuando en el Array están con acentos.

O sea yo escribo maria sin acento y en vez de decirme que no se encuentran resultados me debe aparecer María.

Y otra cosilla esto es simplemente para que me eches un vistazo al código, incluido el return, yo creo que está bien.

He incluido en el input text unas líneas de validación para que salga un mensaje en el caso de que los caracteres no sean correctos o el campo esté en blanco y si todo es correcto pues que haga la búsqueda.

function busca(buscar) {
campoNombre = document.getElementById("text1").value;

//valida que el texto del campo no sea el que aparece automáticamente al tener el foco
if (campoNombre == "Ingresar texto de búsqueda"){
alert(" ¡Por favor! \n escriba el texto de búsqueda");
return false;
//valida que el campo no esté vacío y no tenga sólo espacios en blanco
}else if(campoNombre == 0){
alert("El campo no puede estar en blanco");
return false;
}else
encontrados=new Array();
for(var i=0; i<buscarNombre.length; i++) {
var nodoLower=buscarNombre[i][0].toLowerCase();
if(nodoLower.indexOf(buscar.toLowerCase())!=-1) {
encontrados.push(buscarNombre[i]);
}
}