シンプルなオートコンプリート機能を構築しようとしています。
%like%
私の最初の意図は、ユーザーが に文字を追加または削除するたびにステートメントを使用して特定のデータベースにクエリを実行し<input>
、結果を表示することでした。
しかし、たとえば、JSON をフェッチしてからそれを使用することで、この大量のデータベースの使用を防ぎたいと考えています。
その JSON ファイルを jQuery スクリプトで使用できるようにするにはどうすればよいですか?
シンプルなオートコンプリート機能を構築しようとしています。
%like%
私の最初の意図は、ユーザーが に文字を追加または削除するたびにステートメントを使用して特定のデータベースにクエリを実行し<input>
、結果を表示することでした。
しかし、たとえば、JSON をフェッチしてからそれを使用することで、この大量のデータベースの使用を防ぎたいと考えています。
その JSON ファイルを jQuery スクリプトで使用できるようにするにはどうすればよいですか?
オートコンプリート ルックアップの結果が毎回変わるべきではないことがわかっている場合は、jQuery UIオートコンプリート デモ ページで説明されているように、結果をオブジェクトにキャッシュできます。
$(function () {
var cache = {};
$("#birds").autocomplete({
minLength: 2,
source: function (request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
$.getJSON("search.php", request, function (data, status, xhr) {
cache[term] = data;
response(data);
});
}
});
});
ただし、ユーザーが何かを入力し始める前に、JSON の完全な結果を事前に読み込みたいようです。その場合、ページが最初にロードされるときに、次のように JSON オブジェクトを前もってロードするだけです。
$.getJSON("search.php", request, function (data, status, xhr) {
cache[term] = data;
response(data);
});
次に、オートコンプリート ルックアップのソースとしてローカル オブジェクト (上記の例では「キャッシュ」) を使用します (メイン オプションについては、デフォルトおよびカスタム表示オートコンプリートのデモを参照してください)。たとえば、次のようになります。
$("#autocompleteInput").autocomplete({
source: cache
});