so , i resume for the viewers:
- you have to add the jquery-ui.css
-remove the appendTo attribute
- use response method to return results.
And is not necessary to use JSON data .In this case the api return brut data
so , the code is :
$(document).ready(function() {
$("#search").each(function () {
var autocompleteUrl = $(this).attr('autocomplete-url');
console.log('autocomplete vaut ' + autocompleteUrl);
$("#search").autocomplete({hint: false}, {
source: function (query, response) {
let donnees ;
/* $.getJSON(
autocompleteUrl + query.term,
function (data) {
response(data);
});*/
console.log(query.term);
$.ajax({
type: "GET",
cache: false,
url: autocompleteUrl + query.term + '&fields=departement&boost=population&limit=5' }).then(function (result) {
noms=JSON.stringify(result);
response($.map(result, function(item){
console.log(item.nom);
return item.nom ;
}),
);
});
},
select: function (event, ui){
event.preventDefault();
console.log(ui);
$(event.target).val(ui.item.value);
return false ;
},
focus:function( event, ui ) {
console.log(ui);
$( "#search" ).val( ui.item.value);
return false;
},
delay: 500,
minLength: 2,
});
})
})
You can upload simply with jQuery `.ajax()`.
HTML:
<!-- language: lang-html -->
<form id="upload-form">
<div>
<label for="file">File:</label>
<input type="file" id="file" name="file" />
<progress class="progress" value="0" max="100"></progress>
</div>
<hr />
<input type="submit" value="Submit" />
</form>
CSS
<!-- language: lang-css -->
.progress { display: none; }
Javascript:
<!-- language: lang-javascript -->
$(document).ready(function(ev) {
$("#upload-form").on('submit', (function(ev) {
ev.preventDefault();
$.ajax({
xhr: function() {
var progress = $('.progress'),
xhr = $.ajaxSettings.xhr();
progress.show();
xhr.upload.onprogress = function(ev) {
if (ev.lengthComputable) {
var percentComplete = parseInt((ev.loaded / ev.total) * 100);
progress.val(percentComplete);
if (percentComplete === 100) {
progress.hide().val(0);
}
}
};
return xhr;
},
url: 'upload.php',
type: 'POST',
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data, status, xhr) {
// ...
},
error: function(xhr, status, error) {
// ...
}
});
}));
});
