Bonjour,
Voila je rencontre un petit problème avec mon code.
var app = {
timer: null,
init: function () {
var instance = this;
$(document).on("pagecreate", "#home", function () {
$("#autocomplete").on("filterablebeforefilter", function (e, data) {
var $ul = $(this),
$input = $(data.input),
value = $input.val(),
html = "";
$ul.html("");
if (value && value.length > 2) {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
$ul.listview("refresh");
$.ajax({
url: "./uploads/data.json",
datatype : "jsonp",
data: {
searchfor: $input.val()
}
}).done(function (data) {
data = $.parseJSON(data);
instance.renderUL(data,$ul);
});
}
});
});
$(document).on("pagebeforechange", function (e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL
if (typeof data.toPage === "string") {
// We are being asked to load a page by URL
var u = $.mobile.path.parseUrl(data.toPage),
_re = "#contact";
if (u.hash.search(_re) !== -1) {
var name = 'nom';
var results = new RegExp('[\\?&]nom=([^&#]*)').exec(data.toPage);
var nom = results !== null ? results[1] || '' : '';
$.ajax({
type: "POST",
url: "detail.html?nom=" + nom
}).done(function (data) {
data = $.parseJSON(data);
instance.detailPage(data);
});
e.preventDefault();
}
}
});
},
search: function (searchFor) {
var instance = this;
$.mobile.loading('show');
console.log(instance);
},
renderUL: function (result,$ul) {
var tmpl = [],
len = result.records.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
tmpl.push('<li><a href="#personne?nom=' + result.records[i].nom + '">' + result.records[i].name + '</a></li>');
}
$ul.html(tmpl.join(''));
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
} else {
$ul.html('<li>Désolé il n'y a pas de résultat</li>');
}
$.mobile.loading('hide');
},
detailPage: function (data) {
}
};<br><br>
{"records":[{"label":"Test","value":"Toto","ID":"4548454","Nom":"Test","Prenom":"Toto","CP":null,"Ville":null,"Procuration":"test","Signature":"ok","Presence":"present","Procuration2":"test2","Procuration3":"test3","Procuration4":"test4"},{"label":"Moulin","value":"BOB","ID":"5564545","Nom":"Moulin","Prenom":"Bob","CP":null,"Ville":null,"Procuration":null,"Signature":"ok","Presence":"present"}]}
Je cherche actuellement à faire une recherche autocomplete cependant j'obtient une erreur à la première ligne de mon JSON
mal formé data.json:1:1
mal formé test.html:1:1
Une idée d'où cela pourrait venir ?
Hello,
Je vois un petit soucis sur cette ligne:
$ul.html('<li>Désolé il n'y a pas de résultat</li>');
Il manque un petit \ au niveau du "n'y" pour éviter de tout casser => n\'y
effectivement , sinon j'ai tester une autre façon et j'obtient ceci :
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
$( document ).on( "pageinit", "#preActTab", function() {
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
if ( value && value.length > 2 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "./uploads/data.json",
dataType: "json",
beforeSend: function(xhr){
if (xhr.overrideMimeType)
{
xhr.overrideMimeType("application/json");
}
},
crossDomain: true,
data: {
q: $input.val()
}
})
.then( function ( response ) {
$.each( response, function ( i, val ) {
html += "<li>" + val + "</li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
})
});
// click to select value of auto-complete and put it back in place
$( document).on( "click", ".autocomplete li", function() {
var selectedItem = $(this).html();
$(this).parent().parent().find('input').val(selectedItem);
// close all, in case still open
$('.autocomplete').hide();
});
});
Une idée?
Salut,
Fait un joli console.log(val) dans ton $.each. Cela te permettra de voir la exactement ce que val (et i aussi) te renvoi. A partir de ça, tu pourras avancer.
j'obtient ceci : Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 189 de plus… ]