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
script.js
data.json
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
0
