typeahead di avvio angolare con carico asincrono è un carattere dietro

Question

Ho implementato il seguente codice typeahead in una direttiva.

Ecco il codice HTML:

<div> 
    <input type="text" 
      ng-model="company" 
      uib-typeahead="company as company.name for company in companyByName($viewValue)" 
      typeahead-loading="loadingCompanies" 
      typeahead-no-results="noCompanyResults" 
      class="form-control"> 
    <i ng-show="loadingCompanies" class="glyphicon glyphicon-refresh"></i> 
    <div ng-show="noCompanyResults"> 
     <i class="glyphicon glyphicon-remove"></i> No Results Found 
    </div> 
</div> 

Ecco il JavaScript:

scope.companyByName = function() { 
    var companyName = scope.company.name ? scope.company.name : scope.company; 
    var searchTerms = {name: companyName, startRow: 0, endRow: 20}; 

    return $http.post("backend/get/companies.php", searchTerms).then((result) => { 
     $log.info("Companies", result.data.results); 
     return result.data.results; 
    }); 
    }; 

Il codice PHP backend/get/companies.php accetta una stringa di ricerca e restituisce un array di oggetti con id e name attributi con nomi che contiene quella stringa di ricerca.

Qui è il comportamento che sto vivendo:

Quando digito un singolo carattere "F" nel campo typeahead, il valore di companyName passato allo script di backend è "" (stringa vuota). backend/get/companies.php restituisce tutti i risultati.

Quando si digita un secondo carattere "fo" nel campo typeahead, il valore di companyName passato allo script di backend è "f". backend/get/companies.php restituisce risultati che corrispondono a "f".

Digitando un terzo personaggio ritorna "pippo" i risultati che corrispondono a "fo", ecc

ho modellato il mio codice dopo la official examples. Cosa sta succedendo? La mia sensazione è che in qualche modo la funzione venga chiamata da un evento che si attiva prima che il carattere venga inserito nell'input. qualche idea?

Answer 1

Il problema è che il modello ng è in ritardo rispetto ai valori di visualizzazione. Quando companyByName viene chiamato ng-model non viene aggiornato all'ultimo valore dal campo di input. Per ottenere ultimo valore da input è necessario utilizzare l'argomento che viene passato in companyByName funzione:

scope.companyByName = function(viewValue) { 
    var searchTerms = {name: viewValue, startRow: 0, endRow: 20}; 

    return $http.post("backend/get/companies.php", searchTerms).then((result) => { 
    $log.info("Companies", result.data.results); 
    return result.data.results; 
    }); 
}; 

Answer 2

typeahead deve essere più veloce della pagina di digerire e quindi utilizzando la portata al posto di valore il suo solo non del tutto lì.

Here è un plunker che mostra entrambe le versioni. Essenzialmente è necessaria la prima versione come sotto

scope.companyByName = function(val) { 
    var companyName = val; 
    var searchTerms = {name: companyName, startRow: 0, endRow: 20}; 

    return $http.post("backend/get/companies.php", searchTerms).then((result) => { 
     $log.info("Companies", result.data.results); 
     return result.data.results; 
    }); 
    };