Angular bootstrap typeahead mit asynchroner Last ist ein Zeichen hinter

Question

Ich habe den folgenden typeahead Code in einer Direktive implementiert. Hier

ist die 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> 

Hier ist die 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; 
    }); 
    }; 

Der PHP-Code backend/get/companies.php akzeptiert einen Suchbegriff ein und gibt ein Array von Objekten mit id und name Attribute mit Namen, die enthält diese Suchzeichenfolge. Hier

ist das Verhalten, das ich erlebe:

Wenn ich ein einzelnes Zeichen „f“ in das typeahead Feld eingeben, wird der Wert von companyName an das Backend-Skript übergeben ist „“ (leere Zeichenkette). backend/get/companies.php gibt alle Ergebnisse zurück.

Wenn ich ein zweites Zeichen "fo" in das Feld "typeahead" eingibt, ist der Wert von companyName, der an das Backend-Skript übergeben wird, "f". backend/get/companies.php gibt Ergebnisse zurück, die "f" entsprechen.

ein drittes Zeichen "foo" gibt Ergebnisse Typing, die "fo" entsprechen, usw.

Ich habe meinen Code nach dem official examples modelliert. Was ist los? Mein Gefühl ist, dass die companyByName()-Funktion irgendwie von einem Ereignis aufgerufen wird, das ausgelöst wird, bevor das Zeichen in die Eingabe eingegeben wird. Irgendwelche Gedanken?

Answer 1

Problem ist, dass ng-Modell hinter Ansichtswerte zurückbleibt. Wenn companyByName aufgerufen wird, wird ng-model nicht vom Eingabefeld auf den neuesten Wert aktualisiert. Um aktuellen Wert vom Eingang sollten Sie Argument verwenden, die in companyByName Funktion übergeben wird:

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 muss schneller sein als die Seite verdaut und daher Umfang anstelle von Wert sein gerade nicht ganz da.

Here ist ein Plunker, der beide Versionen zeigt. Im Wesentlichen benötigen Sie die erste Version wie unten

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; 
    }); 
    };