角度1.6.6とuib-typaheadがうまく機能しない

Question

次の問題があります。私はAngular 1.6.6を1.4.8から動かしました。

<input type="select" class="form-control pull-right" 
 
    placeholder="Enter IPC or Project Reference" ng-model="systemState.quickSearchTerm" 
 
    uib-typeahead-on-select="selectQuickSearchResult($item)" 
 
    uib-typeahead="result.display for result in quickSearchResults" 
 
    ng-change="quickSearch()" uib-typeahead-wait-ms="200" ng-model-options="{debounce: 500}" 
 
    typeahead-min-length="4" 
 
/>

ユーザーが最初の4つの文字を入力した後の入力は私のデータベース一致するエントリの中に検索します。 5番目の文字を入力すると一致する結果が表示され始めますが、検索は最初の4個について行われます。 私はよく説明します：1つのエントリに文字列5112があるとします。 5112 、結果は表示されませんが、51123と入力すると5112が返されます。 助けが必要ですか？

ありがとうございます。

Answer 1

sourceArrayの式が が入力内の入力された値に対応することを特別$ viewValue変数を使用することができます

...以下のようにしてください。

<input type="select" class="form-control pull-right" 
    placeholder="Enter IPC or Project Reference" ng-model="systemState.quickSearchTerm" 
    uib-typeahead-on-select="selectQuickSearchResult($item)" 
    uib-typeahead="result.display for result in quickSearchResults | filter:{display :$viewValue}" 
    ng-change="quickSearch()" uib-typeahead-wait-ms="200" ng-model-options="{debounce: 500}" 
    typeahead-min-length="4" 
/> 

Answer 2

私は先行入力inputボックスの中に、すぐにユーザーの種類としてqueryの検索を言うと思います。 debounceを既に使用しているので、サーバにコールする前に500msを待つことに注意します。 uib-typeaheadディレクティブにquickSearch($viewValue)メソッドを使用します（以下のHTMLを確認してください）とquickSearch方法都度から$http約束を返すAPIから毎回データをフェッチするために、あなたの先行入力を行うことが

。

Htmlの

<input type="select" class="form-control pull-right" 
    placeholder="Enter IPC or Project Reference" 
    ng-model="systemState.quickSearchTerm" 
    uib-typeahead-on-select="selectQuickSearchResult($item)" 
    uib-typeahead="result.display for result in quickSearch($viewValue)" 
    typeahead-loading="loadingLocations" 
    typeahead-no-results="noResults" 
    uib-typeahead-wait-ms="200" ng-model-options="{debounce: 500}" 
    typeahead-min-length="4" 
/> 
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i> 
<div ng-show="noResults"> 
    <i class="glyphicon glyphicon-remove"></i> No Results Found 
</div> 

コントローラ

//If you could show me quickSearch method, I can help you to correct this method. 
$scope.quickSearch = function (query){ 
    //I assumed you returned $http to make ajax 
    return $http.get('url?query='+query).then(function(){ 
    return response.data; 
    }) 
} 

Answer 3

はそれを解決します！属性uib-typeaheadを除いて、すべてのuib- *接頭辞を削除しました。そして、それは動作します。