web-dev-qa-db-ja.com

サーバー側の最適化のために$ httpを介してサーバーとangular-uiの先行入力を結び付ける方法は？

先行入力の例（ http://angular-ui.github.io/bootstrap/#/typeahead ）では、このオートコンプリートにバックエンドを実装するのは簡単ですが、例を示していません。私が特に興味を持っているのは、サーバーにthatを送信し、既にフィルターされた結果を送り返すことができるように、現在入力されている文字列を見つけることですサーバー側でこの最適化を行い、クエリを最小化するには、結果セット全体を返し、表示する一致しないアイテムを除外するだけでは、データベースに200,000を超えるエントリがあるアプリに適しているとは思いません。

この場合、先行入力を完全に忘れて、ドロップダウンを使用してカスタムソリューションを実装する必要がありますか、またはこれを簡単に行う方法はありますか？

angularjsangular-ui
69
Swader

これを非常に簡単に実装する方法があり、カスタムソリューションを展開する必要はありません（少なくともこの場合は例外です！）。基本的に、typeaheads式の一部として任意の関数を使用できます。例：

_<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">
_

この例からわかるように、getStates($viewValue)メソッド（スコープで定義）を呼び出すことができ、_$viewValue_はユーザーが入力した値に対応します。

ここで最も優れているのは、関数がプロミスを返すことができ、このプロミスが先行入力によって正しく認識されることです。

しばらく前に、サーバー側の呼び出しを使用してオートコンプリートを提供する方法を示すサンプルプランクを作成しました。 JSONPサービスからライブでクエリされる米国のすべての都市（geobytes.comに基づく）のオートコンプリートを示すこのプランクを確認してください。

http://plnkr.co/edit/t1neIS?p=preview

サーバー側でフィルタリングを行う方法の実例については、それを確認してください（結果を表示するには少なくとも3文字を入力する必要があります）。もちろん、jsonp呼び出しに限定されず、promiseを返す任意のメソッドを使用できます。

120
pkozlowski.opensource

コメントする担当者がいないので、回答として投稿してください（ごめんなさい！）

bootstrapの新しいバージョンを使用している場合は、先行入力の前にuib-を追加する必要があります）

<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">
4
Joff