AJAX - buscador que recoja de un array mediante ajax

   
Vista:

buscador que recoja de un array mediante ajax

Publicado por Sam (7 intervenciones) el 27/02/2016 00:31:03
Hola amigas/os, veran tengo un problema tengo un codigo, que funciona bien, el cual cuando yo meto una palabra en el input , automaticamente me sale un listado de resultados, extraido de un array.

Dicho array de datos almacenados, esta en un archivo json.

El problema es que no se hacer lo mismo pero extrayendo los datos desde un array en php, osea desde un archivo php.

imagino que en javascript tendria que sustituir "$.getJSON" por $.ajax"

pero no se desarrollar estas pocas lineas de codigo, si me pudieran ayudar les estaria muy agradecido por ello.

Miren este es mi codigo:

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
 
<html lang="es">
 
    <head>
            <meta charset="utf-8" />
            <title>Buscador</title>
    </head>
 
 
 
    <body>
 
        <h1>Buscador ajax y jquery</h1>
 
        <input type="buscador" name="buscador" id="buscador" placeholder="Nombre o Info" />
 
 
        <div id="resultado"></div>
 
 
 
        <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
        <script src="script.js"></script>
 
    </body>
 
</html>






script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$('#buscador').keyup(function()
 
    {
            var dato_a_buscar = $('#buscador').val();
            var myExp = new RegExp(dato_a_buscar, 'i');
 
 
            $.getJSON('data.json', function(dato)
 
                {
                    var salida = '<ul>';
 
                    $.each(dato, function(clave, valor)
 
                        {
                                if((valor.name.search(myExp) != -1))
 
                                    {
                                        salida +='<li>';
                                        salida +='<h2>' + valor.name + '</h2>';
                                        salida +='</li>';
                                    }
                        });
 
 
                    salida += '</ul>';
 
                    $('#resultado').html(salida);
                });
    });




data.json
1
2
3
4
5
6
7
8
9
10
11
12
[
{
"name":"Barot Bellingham"
},
{
"name":"Jonathan G. Ferrar II"
},
{
"name":"Hillary Hewitt Goldwynn-Post"
}
 
]
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

buscador que recoja de un array mediante ajax

Publicado por xve (167 intervenciones) el 27/02/2016 11:51:45
Hola Sam, seria algo así:

Tu archivo index.html, es el mismo que el tuyo, no hay que tocar nada.


El archivo script.js, quedaría así:
1
2
3
4
5
6
7
$('#buscador').keyup(function()
{
	var dato_a_buscar = $('#buscador').val();
	$.post('archivo.php',{"dato_a_buscar":dato_a_buscar},function(data){
		$('#resultado').html(data);
	});
});


El nuevo archivo denominado archivo.php contendría:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$miArray=array(
	"Barot Bellingham",
	"Jonathan G. Ferrar II",
	"Hillary Hewitt Goldwynn-Post"
);
 
foreach($miArray as $nombre)
{
	if(strpos(strtolower($nombre), strtolower($_POST["dato_a_buscar"]))!==false)
	{
		$salida="<ul>";
		$salida.="<li>";
		$salida.="<h2>".$nombre."</h2>";
		$salida.="</li>";
		$salida.="</ul>";
		echo $salida;
	}
}
?>


Espero que te sirva
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

buscador que recoja de un array mediante ajax

Publicado por Sam (7 intervenciones) el 27/02/2016 16:29:03
xve, expectacular.

Justo lo que necesitaba entender y aprender.

Una cosa xve;

Para que me muestre los resultados que vayan coincidiendo con las letras que voy metiendo.

Es decir que si meto la "c" me muestre todos los resultados que "empiecen" por la "c",

(no, que contengan la "c"). y a medida que se mete un segundo caracter de busqueda que coincida

osea "ce", que se filtre la busqueda a menos resultados cada vez.

¿Que habria que añadir al archivo php?

por que lo he intentado con substr(), pero no me funciona :-(
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

buscador que recoja de un array mediante ajax

Publicado por Sam (7 intervenciones) el 27/02/2016 18:10:41
Ok, ya encontre la solucion:

if(strpos(strtolower($nombre), strtolower($_POST["dato_a_buscar"]))===0)

Asi busca las coincidencias desde el principio, espero que le sirva a alguien.

Un saludo, a todos y en especial a xve por su paciencia y sabiduria cosmica.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar