buscador que recoja de un array mediante ajax

mensajeescrito · #1 (**permalink**) 26/02/2016, 17:36

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

Código HTML:

Ver original<!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

Código Javascript:

Ver original$('#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

Código json:

Ver original[
{
"name":"Barot Bellingham"
},
{
"name":"Jonathan G. Ferrar II"
},
{
"name":"Hillary Hewitt Goldwynn-Post"
}
 
]

Alexis88 · #2 (**permalink**) 27/02/2016, 18:42

El archivo PHP tendrá que devolver dicho array como un objeto JSON:

Código PHP:

Ver originalecho json_encode($array);