1

Google AppEngine（GAE）でホストされるjQueryオートコンプリート検索バーを実装しようとしています。リモートソースを使用したい場合は、自分で結果をフィルタリングする必要があることを示す投稿を見ました。リストを配列としてスクリプトに保存すると、正しくフィルタリングされるので、手動でフィルタリングする必要がないように、GAEから返された大きなサーバー側のJSON配列をローカルクライアント配列に変換しようとしました。どちらの試みもうまくいきませんでした。

（jQuery / .js初心者にとって）フィルター処理された非ローカル結果を取得する最も簡単な方法は何ですか？

これは、jQueryuiドキュメントで提供されている正規表現の例とSOに投稿されている他の例を使用するための私の試みでした。検索バーに「c」と入力すると、ドロップダウンリストに文字cのみが表示されて返されます。

GAE .pyコード：

class Search(webapp2.RequestHandler):
    def get(self):
        data = ["chickenpox", "chlamydia", "cholera" ]
        tags = json.dumps(data)
        self.response.out.write(tags)

テンプレートコード：

注：'/search'jsonデータを返すGAEサーバーハンドラーに転送します。

<script>
var availableTags = '/search';

$(function() {                          
$( "#autocomplete" ).autocomplete({
    source: function( request, response ) {
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( availableTags, function( item ){
                return matcher.test( item );
            }) );
        },  
    minLength: 1,
     select: function( event, ui ) {
                $("#user_input").html('Selected: '+ ui.item.value);
                var entry = ui.item.value;
            }
        });
});
</script>

availableTags以下は、オートコンプリートが結果自体をフィルタリングするようにローカル配列に変換する試みでした。この種のハッキング/回避策は可能ですか？そうでない場合はどうしてですか？

var availableTags = '/search';
var new_local_array = $.parseJSON(availableTags);

どの方法をどのように試すべきですか？ありがとう。

4

1 に答える 1

5

コードにavailableTagsは、文字列（"/search"）が含まれているだけです。データを取り戻すために実際にAJAXリクエストを行っていません。

サーバーでフィルタリングを実行したくない場合は、情報を取得するためにAJAXリクエストを作成してから、そのデータを使用してオートコンプリートウィジェットを構成することをお勧めします。

$.getJSON('/search', function (data) {
    $("#autocomplete").autocomplete({
        source: data,
        minLength: 1,
        select: function (event, ui) { ... }
    });
});

基本的に、ここで行っているのは、一致する可能性のある配列をサーバーに要求することです。その配列を取得したら、それを使用してオートコンプリートウィジェットを初期化します。これにより、ウィジェットがすべてのフィルタリングを実行できるようになります。

于 2012-12-27T19:46:28.997 に答える