Hi, I’ve an autocomplete that is populated from an Ajax request. Until today it worked well, but it doesn’t work if there is a similar item in the list. For example I want to select the item “Vacca Giuseppe” but if I click on it, the autocomplete set the similar item “Vacca Giuseppe Ignazio”.
If I change “Vacca Giuseppe” in “Vacca Giuseppe2” the autocomplete works well.
I don’t find the mistake. Can you help me? thank you in advance.
This is the html
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Azienda</div>
<div class="item-input-wrap">
<input type="text" placeholder="es: Cagliari" id="azienda" name="nome_azienda">
</div>
</div>
</div>
</li>
This is the function
utils.loadAziende = () =>{
app.preloader.show();
app.request({
url: url,
dataType: 'json',
data: {keys: key},
success: function (data) {
const aziende = data.data;
console.log('aziende ' + JSON.stringify(aziende));
var loadSelect = app.autocomplete.create({
inputEl: '#azienda',
openIn: 'dropdown',
preloader: true, //enable preloader
valueProperty: 'nome_azienda', //object's "value" property name
textProperty: 'nome_azienda', //object's "text" property name
limit: 5,
typeahead: true,
dropdownPlaceholderText: 'Scrivi...',
source: function (query, render) {
var autocomplete = this;
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Show Preloader
autocomplete.preloaderShow();
// Find matched items
for (var i = 0; i < aziende.length; i++) {
console.log(aziende[i]);
if (aziende[i].nome_azienda && aziende[i].nome_azienda.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(aziende[i]);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
},
on: {
change: function (value) {
var id_azienda = document.getElementById('id_azienda');
if (typeof(id_azienda) != 'undefined' && id_azienda != null)
{
document.getElementById("id_azienda").value = value[0].id;
document.getElementById("colture").value = value[0].colture;
}
var id = document.getElementById('id_azienda2');
if (typeof(id) != 'undefined' && id != null)
{
document.getElementById("id_azienda2").value = value[0].id;
document.getElementById("codice").value = value[0].codice_azienda;
document.getElementById("ato").value = value[0].ato;
document.getElementById("sut").value = value[0].sut;
document.getElementById("localita").value = value[0].localita;
document.getElementById("comune").value = value[0].nome_comune;
document.getElementById("provincia").value = value[0].provincia_comune;
document.getElementById("cap").value = value[0].cap_comune;
document.getElementById("indirizzo_colturale").value = value[0].indirizzo_colturale;
document.getElementById("telefono_azienda").value = value[0].telefono_azienda;
document.getElementById("email_azienda").value = value[0].email_azienda;
var nome_azienda = document.getElementById("nome_azienda");
if(!utils.isEmpty(nome_azienda)) nome_azienda.value = value[0].nome_azienda;
}
}//change
}//on
});//autocomplete-create
app.preloader.hide();
},//success
error: function(xhr, status){
switch(status)
{
case 400: app.preloader.hide(); app.dialog.alert('[400] Spiacenti si è verificato un errore'); break;
}
}//error
});//request
}//loadAziende
I call the function here:
{
name: 'anagrafica-menu',
path: 'menu/',
url: './pages/anagrafica/menu-add.html',
on: {
pageInit: function(e,page){
page.router.clearPreviousHistory();
utils.loadAziende();
anagrafica.handleOptionsCompanies();
}
},
},