[SOLUCIONADO] Autocomplete y Json, algunas dudas

[ignacioribes]

Hola a todos!, estoy intentando hacer una aplicación con JQuery y necesito usar la función de autocomplete. Este es el código que tengo hasta el momento basado en el ejemplo que encontré:

Código:

 $( "#search" ).autocomplete(
        {
            source:data,
            minLength:3,
            select: function( event, ui ) {
                $( "#search" ).val( ui.item.label + " / " + ui.item.actor );
                return false;
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a><strong>" + item.label + "</strong> / " + item.actor + "</a>" )
                .appendTo( ul );
            };       
        });

Código:

var data = [
        {"label":"Aragorn", "actor":"Viggo Mortensen"},
        {"label":"Arwen", "actor":"Liv Tyler"},
        {"label":"Bilbo Baggins", "actor":"Ian Holm"},
        {"label":"Boromir", "actor":"Sean Bean"},
        {"label":"Frodo Baggins", "actor":"Elijah Wood"},
        {"label":"Gandalf", "actor":"Ian McKellen"},
        {"label":"Gimli", "actor":"John Rhys-Davies"},
        {"label":"Gollum", "actor":"Andy Serkis"},
        {"label":"Legolas", "actor":"Orlando Bloom"},
        {"label":"Meriadoc Merry Brandybuck", "actor":"Dominic Monaghan"},
        {"label":"Peregrin Pippin Took", "actor":"Billy Boyd"},
        {"label":"Samwise Gamgee", "actor":"Sean Astin"}
        ];

Tome de referencia este sitio http://www.jqueryautocomplete.com/, pero necesito tomar datos anidados y no se como, tampoco puedo cambiar que tome "name" en vez de "label" ej:

Código:

{
    "risulatati": [
        {
            "nome": "Mariano",
            "pv": "PV002",
            "luogo": "Europa.Italia.Campania.Napoli",
            "recapiti": {
                "tel": "08112345678",
                "mail": "[email protected]",
                "skype": "lopsum"
            }
    ]
}

Espero que se entienda . Saludos!

[Alexis88]

Podrías previamente tomar todos los valores contenidos dentro de los objetos del array contenido en el primer atributo del objeto principal y con ayuda de bucles, los vas insertando en un nuevo array.

Código Javascript:

var availableTags = {
                      "datos": [ 
                                 {
                                   "nombre": "Juan",
                                   "edad": "24",
                                   "extra": {
                                     "estatura": "1.97",
                                     "peso": "45"
                                   }
                                 }
                               ]
                    },
    datos = [];
 
for (var i in availableTags.datos){
  for (var j in availableTags.datos[i]){
    if (typeof availableTags.datos[i][j] === "object")
      for (var k in availableTags.datos[i][j]){
        datos.push(availableTags.datos[i][j][k]);
      }
    else
      datos.push(availableTags.datos[i][j]);
  }
}
 
$("#search").autocomplete({
  source: datos
});
 

En el objeto principal "availableTags", hay un único atributo de nombre "datos", que tiene como valor a un array que contiene un objeto, en dicho objeto, hay 3 atributos, los dos primeros contienen 2 cadenas, mientras que el tercero contiene un objeto con dos atributos con cadenas como valores, por último, declaro un nuevo array.

Con un primer bucle, recorro el array del único atributo del objeto "availableTags", enseguida, recorro dicho array con otro bucle y en cada iteración verifico si el valor de cada atributo es un objeto, de ser así, lo recorro con un tercer bucle y añado cada uno de sus valores al nuevo array, caso contrario, añado los valores del objeto en cuestión al array. Finalmente, designo dicho array (el nuevo) como la fuente de donde se alimentará el autocompletado.

El resultado es este: http://jsbin.com/bekig/1

Saludos

[ignacioribes]

Alexis! Muchas gracias por tu respuesta!!

[ignacioribes]

Lo resolvi de otra manera, este es el JS:

Código:

// Load up search data source from server
	$.ajax({
		url: 'data/jsonList.json',
		dataType: 'json'
	}).done(function (data) {
		if (data.risulatati) {
			// As an example we'll only use 'nome' as the lookup value
			var dataSource = [];
			$.each(data.risulatati, function(idx, item) {
				dataSource.push(item.nome, item.pv, item.luogo);
			});
			
			// Init autocomplete passing the data and options
			$( "#search" ).autocompleteArray(
				dataSource,
				{
					minChars: 1,
					maxItemsToShow: 3,
					onItemSelect: function (item) {
						console.log('You selected: ' + $(item).text());
					}
				}
			);
		}

El tema ahora es que no llego a los datos que están "anidados" que son el mail o el tel:

Código:

{
    "risulatati": [
        {
            "nome": "Mariano",
            "pv": "PV002",
            "luogo": "Europa.Italia.Campania.Napoli",
            "recapiti": {
                "tel": "08112345678",
                "mail": "[email protected]",
                "skype": "lopsum"
            }
        }

[Alexis88]

Eso sucede cuando copias y pegas código sin siquiera haberlo analizado. Analiza y luego utiliza la forma que te expliqué, te lo puse bastante simple como para que le agarres el hilo en una.

DEMO

Saludos

[ignacioribes]

Hola Alexis, si revise tu código, e incluso lo estoy probando, solamente que estaba buscando una alternativa para no tocar el json ya que solamente lo recibo. Un amigo me paso ese código.

[Alexis88]

El ejemplo que te pasé te sirve con cualquier objeto JSON, así que no es necesario que lo toques. Lo único que tendrías que indicar el nombre del objeto al momento de leerlo, que es exactamente lo mismo que hace el algoritmo que te pasó tu amigo, con la diferencia de que el que te pasé, así aumentes, disminuyas y/o alteres atributos al objeto, sí funciona.

Saludos